vue组件之间的通信

发表于 | 分类于 | | 阅读次数

###vue组件之间的通信
1.父组件—>子组件 传递数据 通过props接收参数
2.子组件—>父组件 相比父→子组件通信，子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点：自定义事件。
vue提供的事件接口，我们用它提供的api $emit(eventName) 来触发一个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <son :message='msg' @connect='say'></son>
    </div>
    <script>
        /*
            1.父组件--->子组件 传递数据  通过props接收参数
            2.子组件--->父组件 相比父→子组件通信，子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点：自定义事件。
             vue提供的事件接口，我们用它提供的api  $emit(eventName) 来触发一个事件
         */
        // 1.父组件--->子组件 //2.子组件--->父组件

        //首先注册一个组件，叫做son

        Vue.component('son',{
            props:['message'],//父组件--->子组件 传递数据  通过props接收参数
            template:`<div>{{message}}<button @click="send">点击</button></div>
            `,
            data(){
                return {
                    msg2:"我是子组件的数据"
                }
            },
            methods:{
                send(){
                    this.$emit('connect',this.msg2) //自定义一个事件叫connect,通过$emit来触发；
                }
            }
        })

        // 定义一个vue实例

        let vm=new Vue({
            el:"#app",
            data:{
                msg:'我是父级组件的数据'
            },
            methods:{
                say(msg){
                    console.log('监听到connect的触发');
                    console.log(msg);
                }
            }
        })





    </script>
</body>
</html>