Vue3 组件通信

Vue3 组件通信

十二月 04, 2020

Vue组件通信

  1. 父->子
  2. 子->父
  3. 非父子
  4. 跨组件通信

父子组件通信

  1. 父组件传递给子组件money数据
  2. html: 父组件中的子组件绑定自定义属性 :money=”money”
  3. js: 子组件用props属性接收
  4. html: 子组件就可以使用父组件的money数据
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <Father></Father>
</div>
<template id="father">
    <div>
        <Son :money="money"></Son>
    </div>
</template>
<template id="son">
    <div>
        son {{ money }}
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Vue.createApp({})
    .component('Father', {
        template: '#father',
        data() {
            return {
                money: 2000,
                phone: 13
            }
        }
    })
    .component('Son', {
        template: '#son',
        props: ['money']
    })
    .mount('#app')

tips: 属性校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// props用法
/* 
props: ['money'] // 只接收不校验
 */


/* 
props: {
    money: Number // 表示我接收到的数据必须是一个Number类型
} 
*/

// 3.
/* 
props: {
    money: {
        validator(val) { // 校验函数, validator这个名称是死的
            if (val < 3000) alert('钱太少了')
        }
    }
}
 */

子父组件通信

  1. 子组件传递给父组件数据，父组件来接收
  2. html: 父组件中的子组件使用自定义事件【事件名自定义】形式(@get=”setXjk”)，讲父组件方法传递给子组件
  3. js: 子组件设置一个方法(give)执行父组件传递过来的那个自定义事件
  4. Vue提供了一个 $emit // this.$emit(自定义事件名称,参数)
  5. html: 给子组件按钮绑定这个方法(@click=”give”)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <Son @get="setXjk"></Son>
        <hr>
        <p> {{ xjk  }} </p>
    </div>
</template>
<template id="son">
    <div>
        <button @click="give">发红包</button>
    </div>
</template>
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
Vue.createApp({})
    .component('Father', {
        template: '#father',
        data() {
            return {
                xjk: 500
            }
        },
        methods: {
            setXjk(hongBao) {
                this.xjk += hongBao
            }
        }
    })
    .component('Son', {
        template: '#son',
        data() {
            return {
                hongBao: 8888,
                count: 1
            }
        },
        methods: {
            give() {
                // 执行父组件传递过来的那个自定义事件 
                // Vue提供了一个  $emit  
                // this.$emit(自定义事件名称,参数)
                if (this.count > 1) {
                    alert('只执行一次，没钱了')
                    return;
                }
                this.$emit('get', this.hongBao)
                this.count++
            }
        }
    })
    .mount('#app')

非父子组件通信

  1. 案例: 姐姐揍弟弟，弟弟哭
  2. 弟弟有一个数据cryFlag和方法setCryFlag
  3. 姐姐想要使用弟弟的方法来控制弟弟给的数据
  4. 通过共同的父组件，其中父组件的son组件中打一个ref标记，用于父组件获取son组件的方法(ref=”son”)
  5. 父组件设置一个kick方法 里面的this.$refs包含son组件的方法(console.log(this.$refs))
  6. 父组件的sister组件中绑定自定义属性 :kick=”kick”, sister组件通过props接收
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <Sister :kick="kick"></Sister>
        <Son ref="son"></Son>
    </div>
</template>
<template id="son">
    <div>
        <p v-if="cryFlag"> 呜呜呜 </p>
    </div>
</template>
<template id="sister">
    <div>
        <button @click="kick">揍弟弟</button>
    </div>
</template>
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
Vue.createApp({})
    .component('Father', {
        template: '#father',
        methods: {
            kick() {
                // console.log(this.$refs);
                this.$refs.son.setCryFlag()
            }
        }
    })
    .component('Son', {
        template: '#son',
        data() {
            return {
                cryFlag: false
            }
        },
        methods: {
            setCryFlag() {
                this.cryFlag = !this.cryFlag
            }
        }
    })
    .component('Sister', {
        template: '#sister',
        props: ['kick']
    })
    .mount('#app')

跨组件通信

  1. 父组件里面有个属性 provide，在里面写数据
  2. 子孙组件有个属性 inject ，注入上面给的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
    <Hello></Hello>
</div>
<template id="hello">
    <div>
        <Father></Father>
    </div>
</template>
<template id="father">
    <div>
        <Son></Son>
    </div>
</template>
<template id="son">
    <div>
        <grand-son></grand-son>
    </div>
</template>
<template id="grand-son">
    <div>
        {{ money }}
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Vue.createApp({})
    .component('Hello', {
        template: '#hello',
        provide: {
            money: 10000
        }
    })
    .component('Father', {
        template: '#father'
    })
    .component('Son', {
        template: '#son'
    })
    .component('grand-son', {
        template: '#grand-son',
        inject: ['money'], // 注入
    })
    .mount('#app')
  1. 1. Vue组件通信
    1. 1.1. 父子组件通信
    2. 1.2. 子父组件通信
    3. 1.3. 非父子组件通信
    4. 1.4. 跨组件通信