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