Vue组件通信,如何搭建数据桥梁

零 Vue.js教程评论63字数 7151阅读23分50秒阅读模式

Vue组件通信,如何搭建数据桥梁

前言

Vue组件化的思想,让前端的代码编写起来更加的优雅,让各个组件变成独立的、可复用的模块,这无疑提高了开发应用的效率降低了开发人员的压力。但是这样就诞生一个问题:当组件变成独立的模块时,各个组件之间如果要进行数据的交互,应该如何进行操作呢。 这里就要利用到这个知识:‘组件通信’,而在组件之间的通信中,也分为几个不同的通信场景,在不同的场景下,将要采取不同的通信方法。有以下几种通信场景:
①父子通信(父组件与子组件之间的通信)
②兄弟通信(父组件的两个子组件之间的通信)
③跨级组件通信(比如祖孙组件等跨级别的通信)
④全局事件总线

 文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

父子通信文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

 文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

父子通信包括两种情况,第一种是父组件向子组件发送数据,第二种是子组件向父组件发送数据。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

这里我们用一个实战例子,能够更形象展示出Vue组件通信的使用场景。
场景的主要内容很简单,就是一个输入框input标签和ul标签,初始化一个列表数组['html','css'],通过用input标签中输出的值,点击确定后将该值push进列表数组,通过ul标签将数组内容展示出来。效果如下:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

image.png文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

1.父向子通信文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

此时在该例子中,我们把输入框和列表数据作为父组件,ul列表的渲染作为子组件,此时当父组件进行完点击确定事件时,列表数组进行更新,我们需要通过父组件向子组件传递这个列表数组,子组件通过defineProps接收数据,从而进行渲染ul,具体代码如下:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

parent组件文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

xml文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17429.html

代码解读
复制代码
<template>
    <div class="header">
        <input type="text" v-model="newMsg">
        <button @click="add">确定</button>
    </div>
    <child :data="list"></child>
</template>

<script setup>
import {ref} from 'vue'
import child from './child.vue'
const newMsg = ref('')
const list = ref(['html','css'])

const add = ()=>{
    list.value.push(newMsg.value)
    newMsg.value = ''  // 重置输入框
}
</script>

child组件

xml

代码解读
复制代码
<template>
    <div class="body">
        <ul>
            <li v-for="item in data">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>
defineProps({
    data:{
        type: Array,
        default:()=>[]
    }
})
</script>

2.子向父通信

实际上在一些子组件需要修改父组件的数据时,子组件可以不向父组件中传递数据,直接对父组件传来的数据进行修改,但是Vue框架中的数据流思想是单向的流向,不建议子组件直接修改父组件的数据,这样会导致数据流向变得混乱。所以在这种情况下以及其他某些情况下我们需要用到子向父通信,在子向父通信有很多种,这里我们列举出了这三种方式:
①发布订阅通过子组件给父组件传递参数,父组件进行修改,
②v-model子组件通过接收props直接操作数据,并通过事件告知父组件
③通过defineExpose()暴露子组件的属性,让父组件以ref获取子组件dom的方式得到该属性

①通过发布订阅的方式(实质是在父组件中修改数据)
子组件通过调用defineEmits('事件名')方法,创建一个事件对象,并且在接收修改后的数据时发布这个事件并携带想要传递的数据,父组件通过订阅这个事件绑定一个函数,当订阅的事件被子组件触发时,此函数会携带着传递的数据作为函数的参数。在我们的使用场景中,父组件为ul列表并携带列表数组,子组件为输入框input。此时通过子组件创建一个emit对象,在点击事件中发布该事件对象emit,并携带输入框中的数据。在父组件中订阅该事件,并绑定函数handle,在handle中就能接收到参数--也就是输入框中的数据。

parent组件

xml

代码解读
复制代码
<template>
    <child @addMsg="handle"></child>
    <div class="body">
        <ul>
            <li v-for="item in list">{{ item }}</li>

        </ul>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import child from './child.vue'
const list = ref(['html','css'])
const handle = (e)=>{
    list.value.push(e)
    
}
</script>

child组件

xml

代码解读
复制代码
<template>
     <div class="header">
        <input type="text" v-model="newMsg">
        <button @click="add">确定</button>
    </div>
</template>

<script setup>
import {ref} from 'vue'
const newMsg = ref('')
const emit = defineEmits(['addMsg'])    // 定义事件
const add = ()=>{
    emit('addMsg',newMsg.value)     // 发布

}
</script>

②通过v-model的方式通信(实质上是在子组件中修改数据)
实质上,v-model双向绑定数据进行通信是直接通过props和emits来实现。在这个例子中,v-model 实质上是通过 props 和自定义事件 (update:list) 来实现双向绑定的。在props接收到数据list并进行修改后,通过自定义事件const emits = defineEmits('update:list')进行定义事件,(注意此处updata不可随意命名,若格式不一致,则需要在父组件的v-model中重新绑定)接收修改后的list作为emits的第二个参数进行发布(第一个参数为emits的名称'updata:list'),v-model此时就能自动接收到updata:list这个事件,并且双向绑定的数据list会自动响应式更新。 parent组件

xml

代码解读
复制代码
<template>
    <child v-model:list="list"></child>
    <div class="body">
        <ul>
            <li v-for="item in list">{{ item }}</li>

        </ul>
    </div>
</template>

<script setup>
  import {ref} from 'vue'
  import child from './child.vue'
        const list = ref(['html','css'])

</script>

child组件

xml

代码解读
复制代码
<template>
    <div class="header">
       <input type="text" v-model="newMsg">
       <button @click="add">确定</button>
   </div>
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps({
    list:[]
})
const newMsg = ref('')
const emits = defineEmits(['updata:list'])
const add = ()=>{
    // props.list.push(newMsg.value)
    const arr = props.list
    arr.push(newMsg.value)
    emits('updata:list',arr)
}
</script>

③通过defineExpose()方式通信
主要通过父组件使用ref,绑定child组件的dom结构,在child组件中使用defineExpose()方法,将list暴露出来,让ref绑定的dom结构能拿到这个属性。

parent组件

xml

代码解读
复制代码
<template>
    <child ref="childRef"></child>
    <div class="body">
        <ul>
            <li v-for="item in childRef?.list">{{ item }}</li>

        </ul>
    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import child from './child.vue'
const childRef = ref(null)
onMounted(()=>{
    console.log(childRef.value.list);
})
</script>

child组件

xml

代码解读
复制代码
<template>
    <div class="header">
       <input type="text" v-model="newMsg">
       <button @click="add">确定</button>
   </div>
</template>

<script setup>
import {ref} from 'vue'

const newMsg = ref('')
const list = ref(['html','css'])
const add = ()=>{
    list.value.push(newMsg.value)
}
defineExpose({list})
</script>

 

兄弟通信

 

兄弟通信大体有两种简便的方法:
①通过父组件为中转站,进行数据通信
②通过状态管理仓库Vuex,pinia...等,进行全局的数据管理

1.以父组件为中转站的方式,也就是上述父子组件通信的double版本,进行两次的父子通信。

2.通过状态管理仓库,通俗的将就是将数据统一放到一个全局的仓库中,所有组件都能够取得到所需的数据,并且能够响应式地修改数据,使得数据动态地流动,这就是仓库的灵活之处,那仓库应该怎么用呢,这里我以pinia为例。

1. 安装 Pinia

首先,你需要安装 Pinia。可以通过 npm 或 yarn 进行安装:

csharp

代码解读
复制代码
Bash
深色版本
1# 使用 npm
2npm install pinia
3
4# 或者使用 yarn
5yarn add pinia

2. 创建 Pinia 实例

在你的主应用文件(通常是 main.js 或 main.ts)中,创建一个 Pinia 实例,并将它挂载到 Vue 应用程序上

一个简易的仓库文件创建

javascript

代码解读
复制代码
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useQuestionStore = defineStore('question',()=>{
    const score = ref(0)
    function addScore(){
        score++
    }
   
    return{
        score,
        addScore
    }
})

仓库的调用 pinia仓库的调用也很简单,将仓库所在的文件引入,解构出useQuestionStore方法,利用它的返回值,就可以进行数据的利用和修改了。

 

跨级组件通信

 

跨级组件通信大体有三种方法:
①仍然是通过父组件为中转站,进行数据通信,但这种比较费时间和精力,不方便管理。
②仍然是通过状态管理仓库Vuex,pinia...等,进行全局的数据管理。
③通过provide,inject,提供数据并注入的方式。

下面主要讲解第三种方式:在vue3中,privide被新的exposeExpose()方法代替了,以下是使用步骤

  1. 提供数据:
    • 在祖先组件中使用 provide 选项来提供数据或方法。
    • provide 接受一个对象或返回对象的函数,其中键是后代组件注入时所使用的键名,值是要注入的数据或方法。
  2. 注入数据:
    • 在后代组件中使用 inject 选项来注入祖先组件提供的数据。
    • inject 也是一个接受键名的选项,可以是一个字符串或一个配置对象。

示例

下面是一个具体的例子,展示如何使用 provide 和 inject 在 Vue 3 中进行跨层级组件通信。

祖先组件 (Grandparent.vue)

xml

代码解读
复制代码
Vue
深色版本
1<template>
2  <div>
3    <h2>Grandparent Component</h2>
4    <parent></parent>
5  </div>
6</template>
7
8<script setup>
9import Parent from './Parent.vue';
10
11// 提供数据
12const provideData = {
13  message: 'Hello from Grandparent!',
14  greet: () => console.log('Greet from Grandparent!'),
15};
16
17defineExpose(provideData); // Vue 3 中使用 defineExpose 曝露数据
18</script>

父组件 (Parent.vue)

xml

代码解读
复制代码
Vue
深色版本
1<template>
2  <div>
3    <h2>Parent Component</h2>
4    <child></child>
5  </div>
6</template>
7
8<script setup>
9import Child from './Child.vue';
10
11// 父组件不需要做任何事情,只是作为一个中介
12</script>

子组件 (Child.vue)

xml

代码解读
复制代码
Vue
深色版本
1<template>
2  <div>
3    <h2>Child Component</h2>
4    <p>{{ message }}</p>
5    <button @click="greet">Greet</button>
6  </div>
7</template>
8
9<script setup>
10// 注入数据
11const { message, greet } = inject('provideData');
12
13// 如果希望提供默认值
14// const { message, greet } = inject('provideData', { message: 'Default Message', greet: () => {} });
15</script>

说明

  1. Grandparent.vue:
    • 使用 defineExpose 曝露数据,这些数据将在后代组件中通过 inject 获取。
    • 在这里,我们提供了 message 和 greet 函数。
  2. Parent.vue:
    • 父组件不需要做任何特殊的事情,它只是一个中间组件,数据会自动向下传递。
  3. Child.vue:
    • 使用 inject 来获取祖先组件提供的数据。
    • inject 接受一个键名和一个默认值(可选)。
    • 在这个例子中,我们获取了 message 和 greet 函数,并在模板中显示 message,同时绑定 greet 函数到按钮上。

创建全局事件总线

  1. 创建事件总线:
    • 创建一个 Vue 实例作为事件总线。
  2. 暴露事件总线:
    • 为了让其他组件能够使用这个事件总线,我们需要将其暴露出去。

示例代码

arduino

代码解读
复制代码
Javascript
深色版本
// event-bus.js
import { createApp } from 'vue';

// 创建一个空的 Vue 实例作为事件总线
const eventBus = createApp({});

// 导出事件总线
export default eventBus.config.globalProperties.$bus;

使用全局事件总线

一旦创建了全局事件总线,你可以在任何组件中使用它来触发事件和监听事件。

发布事件

  1. 发布事件:
    • 在组件中使用 eventBus.$emit 方法触发事件,并传递数据。

订阅事件

  1. 订阅事件:
    • 在组件中使用 eventBus.$on 方法监听事件,并定义处理逻辑。
  2. 取消订阅:
    • 使用 eventBus.$off 方法取消订阅事件,以避免内存泄漏。

示例代码

假设我们有两个组件,ComponentA 和 ComponentB,它们需要相互通信。

ComponentA.vue

xml

代码解读
复制代码
Vue
深色版本
<template>
  <button @click="sendData">Send Data</button>
</template>

<script setup>
import eventBus from './event-bus';

// 发送数据
const sendData = () => {
  eventBus.$emit('data-event', 'Hello from ComponentA!');
};
</script>

ComponentB.vue

xml

代码解读
复制代码
Vue
深色版本
<template>
  <div>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import eventBus from './event-bus';

// 接收数据
const message = ref('');

// 监听事件
const handleMessage = (msg) => {
  message.value = msg;
};

// 使用 eventBus 订阅事件
eventBus.$on('data-event', handleMessage);

// 在组件销毁前取消订阅
onBeforeUnmount(() => {
  eventBus.$off('data-event', handleMessage);
});
</script>

零
  • 转载请务必保留本文链接:https://www.0s52.com/bcjc/vue-jsjc/17429.html
    本社区资源仅供用于学习和交流,请勿用于商业用途
    未经允许不得进行转载/复制/分享

发表评论