vue中父组件向子组件传值

通过 Prop 向子组件传递数据

首先，准备好父组件要传递的数据

var vm = new Vue({
　　 el: '#app',
    data: {
    msg: '父组件向子组件传递数据啦！'　　　　//父组件要传递的数据
   }
})

通过子组件绑定属性的方式，传递数据

<div id="app">
   <row :send-data="msg"></row>
</div>

子组件通过prop获取传递过来的数据

Vue.component('row',{
    template: '<div>{{sendData}}</div>',
    props: {
            sendData: String　　　　　　//也可以以字符串数组形式列出的 prop，如  props:['sendData']
           }
   })

 

主意：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名)