目录
组件通信是vue中很常见也是很重要的一部分。
1. 父向子组件通信
1.1 props
props是最常用的方式。
// 父
<template>
<child-component1 :name="name"></child-component1>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
data () {
return {
name: '小明'
}
},
}
</script>
// 子
<template>
<div>姓名：{
{
name }}</div>
</template>
<script>
export default {
props: {
name: {
type: String, // String、Number、Boolean、Array、Object、Date、Function、Symbol
default: '', // 默认值
required: true, // 定义该 prop 是否是必填项。如果为true未传值则会抛出警告
validator：Function, // 自定义验证参数，如果函数返回false则会抛出警告
}
},
}
</script>
props简单语法
props: ['name']
props只定义字符串类型
props: {
name: String
}
props如果参数为多类型
props: {
name: ['String', 'Number']
}
1.2 ref
这种方式比较少用到。
// 父
<template>
<div class="page">
<child-component1 :name="name" ref="cp"></child-component1>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
data () {
return {
name: '小明'
}
},
mounted () {
this.$refs.cp.age = 18
}
}
</script>
// 子
<template>
<div class="container">
<div>姓名：{
{
name }}</div>
<div>年龄：{
{
age }}</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
}
},
data () {
return {
age: 0
}
}
}
</script>
1.3 children
通过父组件的children拿到实例，children里是父组件中子组件的集合，官方文档说了不保证里面的顺序。
this.$children[0].age = 30
2. 子向父组件通信
2.1 emit
通过子组件派发事件，父组件监听事件来传值。
// 父
<template>
<div class="page">
<child-component1 @onChildComponen="onChildComponen"></child-component1>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
methods: {
onChildComponen (data) {
alert(data)
}
}
}
</script>
// 子
<template>
<div class="container">
<div @click="onClick">emit</div>
</div>
</template>
<script>
export default {
methods: {
onClick () {
this.$emit('onChildComponen', 1)
}
}
}
</script>
3 子向子组件通信
他们需要有一个共同的父组件，通过$parent.$emit来派发事件，再通过$parent.$on监听事件
3.1 parent
// 父
<template>
<div class="page">
<child-component1 ></child-component1>
<child-component2 ></child-component2>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
import ChildComponent2 from '@/components/ChildComponent2.vue'
export default {
components: {
ChildComponent1,
ChildComponent2
}
}
</script>
// 子1
<template>
<div class="container">
<div @click="onClick">子组件1</div>
</div>
</template>
<script>
export default {
created () {
},
methods: {
onClick () {
this.$parent.$emit('hi', '你好')
}
}
}
</script>
// 子2
<template>
<div class="container">
<div>子组件2</div>
</div>
</template>
<script>
export default {
created () {
this.$parent.$on('hi', (data) => {
alert(data)
})
},
methods: {
}
}
</script>
4 父向孙传值
4.1 provide inject
当组件层级过多的时候使用。
父组件提供provide，其他组件通过inject获得值，常用于组件库的发开。
// 父
provide() {
return {
name: '小明'
}
}
// 子
inject: ['name']
5 任意两个组件之间
5.1 eventBus
通过eventBus的方式，引用相同的bus来通信
// bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
// 组件1
<template>
<div class="container">
<div @click="onClick">子组件1</div>
</div>
</template>
<script>
import Bus from '@/bus.js'
export default {
created () {
},
methods: {
onClick () {
Bus.$emit('hi', '你好')
}
}
}
</script>
6. vuex
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。