vue中通讯方式
- props
- emit
- v-model
- refs
- provide/inject
- eventBus
- Vuex/pinia(vue3)
<!-- list是我们要传递的数据 --> <child-components :list="list"></child-components>子组件:
<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方式 emit方式也是Vue中最常见的组件通信方式,该方式用于子传父; 父组件的template中:
<!-- add是子组件要传递的动作,handleAdd是监听到之后执行的事件 --> <child-components @add="handleAdd"></child-components> <script> const list = ref([1,2,3]) const handleAdd = value => { list.value.push(value) } </script>子组件中:
const emits = defineEmits(['add']) emits('add', 1)3. v-model方式 v-model不能严格成为数据的传递方式,其实只是减少了代码量。
<ChildComponent v-model:list="list" /> // 等价于 <ChildComponent :list="pageTitle" @update:list="list = $event" />子组件需要emit一个叫update:xxx的事件,再把需要更新的响应式数据传给emit方法的第二个参数即可,如:
const emits = defineEmits(['update:list']) emits('update:list', arr)4、Refs 有时候想访问refs绑定的组件的属性或者方法 ,我们会使用refs绑定的组件的属性或者方法,我们会使用refs绑定的组件的属性或者方法,我们会使用refs。但是Vue3不同于Vue2,在 Vue3的setup中我们是无法访问到this的,所以我们需要借助一个方法,那就是getCurrentInstance,该方法返回了当前的实例对象。 父组件如下:
<template> <div> <Child ref="child"></Child> <button @click="show">Show Child Message</button> </div> </template> <script setup> import { getCurrentInstance } from '@vue/runtime-core'; import Child from './Child.vue'; const currentInstance = getCurrentInstance() function show() { currentInstance.$refs.child.alertMessage() } </script>子组件代码如下:
<template> <div> <h1>{{ message }}</h1> </div> </template> <script setup> import { ref } from '@vue/reactivity'; let message = ref('我是子元素').value const alertMessage = function () { alert(message) } defineExpose({ message, alertMessage }) </script>注意⚠️,通过<script setup>语法糖的写法,其组件是默认关闭的,也就是说如果是通过$refs或者$parents来访问子组件中定义的值是拿不到的,必须通过defineExpose向外暴露你想获取的值才行。 5. provide/inject provide/inject是 Vue 中提供的一对 API。无论层级多深,API 都可以实现父组件到子孙组件的数据传递。
// 父组件中 provide('list', list.value) // 子组件中 const list = inject('list')6. eventBus Vue 3 中移除了 eventBus,但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter。 7. vuex/pinia Vuex(vue2)和 Pinia(vue3) 是 Vue 中的状态管理工具,使用这两个工具可以轻松实现组件通信。 标签:vue,const,方式,refs,list,通讯,组件,emit From: https://www.cnblogs.com/cjw0217/p/17788082.html