vue 组件-父组件传值给子组件

父组件通过属性，传值给子组件，子组件通过，props数组里的名称来接受父组件传过来的值。

HTML部分：

     <div id="app">
         <tmp1 :parentData="data"></tmp1>
     </div>

JS部分：

     var app = new Vue({
         el: "#app",
         data: {
             componentName: "login",
             data:"这是父组件的数据"
         },
         methods: {

         },
         components:{
             "tmp1":{
                 data(){
                     // data 里的数据是组件私有的，并不是通过父组件传过来的
                     return {
                         title:"标题",
                         content:"内容",
                         // 如果父组件传值的变量名称 和 data 中的重名了  会报错
                         // parentdata:"子组件也有 parentdata 名的数据怎么办？"
                     }
                 },
                 // 如果想接受父组件传过来的数据，先在 props 数组里面定义一下该属性
                 props:["parentdata"],
                 template:"<h3>子组件--{{ parentdata }}</h3>",
             }
         }
     });

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