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 (短横线分隔命名) 命名：