Vue中使用props父组件向子组件传值

" "

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

父组件：App.vue

父组件中:msgchange的冒号不能省略，加:冒号传递变量，不加传递字符串

<template>
  <div id="app"> 
    {{msg}}
    <hellochange :msgchange=msgdata></hellochange>
  </div>
</template>

<script>
import HelloChange from './components/HelloChange.vue'

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

子组件HelloChange.vue

子组建中通过在Props定义msgchange接收父组件传递的值。

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="hellochange">  
       {{msg}}
       <br>
       {{msgchange}}   
    </div>
</template>

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

输出

​