vue props 传值

描述

父子组件可以利用 props 直接传值，在子组件中定义 props，并可规定传值类型，
当父组件使用子组件时传入相应参数，即可把父组件的数值传递到子组件中。

父组件 Father.vue

<template>
  <div id="app"> 
    {{msg}}
    <last-children :msgchange='msgdata'></last-children>
  </div>
</template>

<script>
import LastChildren from './components/lastChildren.vue'

   export default {  
    components:{
        LastChildren
    },   
      data () { 
        return {       
         msg: '你好vue',
         msgdata: '我是父组件传值'
        }
      }     
    }
</script>

子组件 lastChildren.vue

<template>
    <div>    
       {{ msg }}
       <span>{{ msgchange }}</span> 
    </div>
</template>

<script>
    export default{
        name: 'last-children',
        data(){
            return {               
               msg: '我是一个home组件'             
            }
        },
        props:{
            msgchange: {
                type: String
            }
        }
    }
</script>