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

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

 

HTML部分：

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

JS部分：

 1     var app = new Vue({
 2         el: "#app",
 3         data: {
 4             componentName: "login",  
 5             data:"这是父组件的数据"              
 6         },
 7         methods: {
 8 
 9         },
10         components:{
11             "tmp1":{
12                 data(){
13                     // data 里的数据是组件私有的，并不是通过父组件传过来的
14                     return {
15                         title:"标题",
16                         content:"内容",
17                         // 如果父组件传值的变量名称 和 data 中的重名了  会报错
18                         // parentdata:"子组件也有 parentdata 名的数据怎么办？"
19                     }
20                 },
21                 // 如果想接受父组件传过来的数据，先在 props 数组里面定义一下该属性
22                 props:["parentdata"],
23                 template:"<h3>子组件--{{ parentdata }}</h3>",
24             }
25         }
26     });

 

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

posted @ 2019-01-16 00:59  CHECKY  阅读(190)  评论(0)  编辑  收藏  举报