vue3组件通信 组件间传值
文章目录
下面介绍以下七种组件通信方式:
- props
- emit
- v-model
- refs
- provide/inject
- eventBus
- vuex/pinia
1. Props
父组件代码如下:
<template>
<!-- child component -->
<child-components :list="list"></child-components>
<!-- parent component -->
<button @click="handleAdd" type="button">add</button>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const handleAdd = () => {
list.value.push('vue')
}
</script>
子组件只需要渲染父组件传递的值。代码如下:
<template>
<ul>
<li v-for="i in props.list" :key="i">{{ i }}</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
</script>
2. Emit
子组件代码如下:
<template>
<div>
<input v-model="value" type="text"/>
<div>
<button @click="handleSubmit" type="button">add</button>
</div>
</div>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
const value = ref('')
const emits = defineEmits(['add'])
const handleSubmit = () => {
emits('add', value.value)
value.value = ''
}
</script>
点击子组件中的【添加】按钮后,我们会发出一个自定义事件,并将添加的值作为参数传递给父组件。
父组件代码如下:
<template>
<!-- parent component -->
<ul>
<li v-for="i in list" :key="i">{{ i }}</li>
</ul>
<!-- child component -->
<child-components @add="handleAdd"></child-components>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const handleAdd = value => {
list.value.push(value)
}
</script>
在父组件中,只需要监听子组件的自定义事件,然后执行相应的添加逻辑即可。
3. v-model
v-model 是 Vue 中一个优秀的语法糖,比如下面的代码。
<ChildComponent v-model:title="pageTitle" />
这是以下代码的简写形式
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
子组件
<template>
<div>
<input v-model="value" type="text"/>
<div>
<button @click="handleAdd" type="button">add</button>
</div>
</div>
</template>
<script setup>
import { ref, defineEmits, defineProps } from 'vue'
const value = ref('')
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
const emits = defineEmits(['update:list'])
// Add action
const handleAdd = () => {
const arr = props.list
arr.push(value.value)
emits('update:list', arr)
value.value = ''
}
</script>
在子组件中,我们先定义props和emits,添加完成后再发出指定的事件。
注意:update:*是Vue中固定的写法,*代表props中的一个属性名。
在父组件中使用比较简单,代码如下:
<template>
<!-- parent component -->
<ul>
<li v-for="i in list" :key="i">{{ i }}</li>
</ul>
<!-- child component -->
<child-components v-model:list="list"></child-components>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
</script>
4. Refs
使用API选项时,我们可以通过this.$refs.name获取指定的元素或组件,但在组合API中不行。如果我们想通过ref获取,需要定义一个同名的Ref对象,在组件挂载后可以访问。
示例代码如下:
<template>
<ul>
<li v-for="i in childRefs?.list" :key="i">
{{ i }}
</li>
</ul>
<child-components ref="childRefs"></child-components>
<!-- parent component -->
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const childRefs = ref(null)
</script>
子组件代码如下:
<template>
<div>
<input v-model="value" type="text"/>
<div>
<button @click="handleAdd" type="button">add</button>
</div>
</div>
</template>
<script setup>
import { ref, defineExpose } from 'vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
defineExpose({ list })
</script>
注意:默认情况下,setup 组件是关闭的,通过模板 ref 获取组件的公共实例。如果需要公开,需要通过defineExpose API 公开。
5. provide/inject
provide/inject是 Vue 中提供的一对 API。无论层级多深,API 都可以实现父组件到子组件的数据传递。
父组件
<template>
<!-- child component -->
<child-components></child-components>
<!-- parent component -->
<div>
<input v-model="value" type="text"/>
<div>
<button @click="handleAdd" type="button">add</button>
</div>
</div>
</template>
<script setup>
import { ref, provide } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
provide('list', list.value)
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</script>
子组件
<template>
<ul>
<li v-for="i in list" :key="i">{{ i }}</li>
</ul>
</template>
<script setup>
import { inject } from 'vue'
const list = inject('list')
</script>
注意:使用 provide 进行数据传输时,尽量使用 readonly 封装数据,避免子组件修改父组件传递的数据。
6. eventBus
Vue 3 中移除了 eventBus,但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter。在大多数情况下,不建议使用全局事件总线来实现组件通信。虽然比较简单粗暴,但是维护事件总线从长远来看是个大问题。
- 首先,需要安装
mitt
:
npm install --save mitt
- 然后在
libs
文件夹下,创建一个bus.ts
文件,内容和旧版写法其实是一样的,只不过是把 Vue 实例,换成了 mitt 实例。
import mitt from 'mitt';
export default mitt();
- 创建和移除监听事件
在需要暴露交流事件的组件里,通过 on
配置好接收方法,同时为了避免路由切换过程中造成事件多次被绑定,多次触发,需要在适当的时机 off
掉:
import { defineComponent, onBeforeUnmount } from 'vue'
import bus from '@libs/bus'
export default defineComponent({
setup () {
// 定义一个打招呼的方法
const sayHi = (msg: string = 'Hello World!'): void => {
console.log(msg);
}
// 启用监听
bus.on('sayHi', sayHi);
// 在组件卸载之前移除监听
onBeforeUnmount( () => {
bus.off('sayHi', sayHi);
})
}
})
- 调用监听事件
在需要调用交流事件的组件里,通过 emit
进行调用:
import { defineComponent } from 'vue'
import bus from '@libs/bus'
export default defineComponent({
setup () {
// 调用打招呼事件,传入消息内容
bus.emit('sayHi', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈');
}
})
旧项目升级 EventBus
在 Vue 3.x 的 EventBus,我们可以看到它的 API 和旧版是非常接近的,只是去掉了 $
符号。
如果你要对旧的项目进行升级改造,因为原来都是使用了 $on
、 $emit
等旧的 API ,一个一个组件去修改成新的 API 肯定不现实。
我们可以在创建 bus.ts
的时候,通过自定义一个 bus
对象,来挂载 mitt
的 API 。
在 bus.ts
里,改成以下代码:
import mitt from 'mitt';
// 初始化一个 mitt 实例
const emitter = mitt();
// 定义一个空对象用来承载我们的自定义方法
const bus: any = {};
// 把你要用到的方法添加到 bus 对象上
bus.$on = emitter.on;
bus.$emit = emitter.emit;
// 最终是暴露自己定义的 bus
export default bus;
这样我们在组件里就可以继续使用 bus.$on
、bus.$emit
等以前的老 API 了,不影响我们旧项目的升级使用。
7. vuex/pinia
Vuex 和 Pinia 是 Vue 3 中的状态管理工具,使用这两个工具可以轻松实现组件通信。由于这两个工具都比较强大,这里就不一一展示了。有关详细信息,请参阅文档。