父组件通过属性，传值给子组件，子组件通过，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 (短横线分隔命名) 命名：