vue.js实现数据传递的demo

1.父组件向子组件传递数据

<div id="box">
    <aaa></aaa>
</div>
   
   
1
2
3
   
   
1
2
3

<template id="aaa">
    <h1>模板aaa=>{{msg1}}</h1>   //msg1写在这里是可以的，因为这是父组件内部
    //<bbb>{{msg1}}</bbb>          //这种写法是不可以的，这是在子组件内部，要在这里显示父组件的数
                                //据，需要用props定义属性
    <bbb :m='msg1'></bbb>
</template>

   
   
1
2
3
4
5
6
7
   
   
1
2
3
4
5
6
7

var vm=new Vue({
    el:"#box",
    data () {
        a:'aaa'
    },
    components:{
        'aaa':{
            data () {
                msg1:'父组件的数据'
            },
            template:'#aaa',
            components:{
                'bbb':{
                //  props:['m'],       //这是一种写法，props以数组的形式定义属性
                props：{
                    'm':String           //这是第二种写法，对象的形式
                },
                    template:'<h3>这是子组件bbb--{{m}}</h3>'
                }
            }
        },
    }
})
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   
   

    
    
   
   
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

从这个例子中可以看出，父组件向子组件传递数据，因为每一个组件都是独立的作用域，所以要把父组件的数据在子组件中显示，要使用props定义属性来绑定父组件里面的数据才可以，如这里父组件的数据是msg1，用props定义一个属性m，来接收数据msg1；在子组件的模板里面用{{m}}的形式显示父组件的数据

顶

0