1. Python技术站首页
  2. 其他
  3. Vue

在vue-cli中组件通信的方法

• Vue
yizhihongxing

在Vue CLI中组件通信的方法有多种，其中包括：

  1. 父子组件通信
  2. 兄弟组件通信
  3. 跨级组件通信
  4. 使用Event Bus进行组件通信
  5. Vuex 进行组件通信

下面我将分别详细介绍这些方法及其示例：

1. 父子组件通信

父子组件通信是Vue组件中最常见和最基本的通信方式。父组件可以通过属性(props)将数据传递给子组件，在子组件中使用props绑定这些数据即可。

例如，我们有一个父组件和一个子组件，父组件通过props传递数据给子组件：

<!-- 父组件 -->
<template>
   <child :message="message"></child>
</template>
<script>
   import Child from './Child.vue';
   export default {
       components:{
           Child
       },
       data(){
           return {
               message:'这是来自父组件的信息'
           }
       }
   }
</script>

<!-- 子组件 -->
<template>
   <div>{{message}}</div>
</template>
<script>
   export default{
       props:{
           message:{
               type:String,
               required:true
           }
       }
   }
</script>

在父组件中使用子组件的时候，使用v-bind指令将组件内部定义的变量传递给子组件。这里的message是父组件中定义的。

子组件中的props属性，声明了一个名为message的属性，它的类型是字符串类型（String），并且是必须的（required:true）。

2. 兄弟组件通信

兄弟组件通信需要借助于共同的父组件作为中转，父组件的作用是作为兄弟组件之间传递数据的桥梁。可以通过$emit和$on方法实现。

例如，我们有两个兄弟组件，它们要求相互通信，可以通过共同的父组件来实现：

<!-- 父组件 -->
<template>
  <div>
    <child-one @change="handleChange"></child-one>
    <child-two :message="message"></child-two>
  </div>
</template>
<script>
   import ChildOne from './ChildOne.vue';
   import ChildTwo from './ChildTwo.vue';
   export default {
       components:{
          ChildOne,
          ChildTwo
       },
       data(){
           return {
               message:''
           }
       },
       methods:{
           // 处理子组件触发的change事件
           handleChange(value){
               this.message = value;
           }
       }
   }
</script>

<!-- 子组件1 -->
<template>
  <button @click="handleClick">点击改变消息内容</button>
</template>
<script>
   export default{
       methods:{
           handleClick(){
               this.$emit("change",'这是来自子组件1的信息')
           }
       }
   }
</script>

<!-- 子组件2 -->
<template>
   <div>{{message}}</div>
</template>
<script>
   export default{
       props:{
           message:{
               type:String
           }
       }
   }
</script>

在子组件1中，通过$emit触发父组件的change事件，将'这是来自子组件1的信息'这个字符串作为参数传递给父组件。

在父组件中，接收到子组件1触发的事件，并将消息内容赋值给message变量。

在子组件2中，通过props接收父组件传来的message变量，并使用它。

3. 跨级组件通信

当组件之间没有父子关系时，如何实现组件的通信呢？可以通过Vue的实例进行事件订阅和发布来实现，即使用$emit和$on方法。如果组件之间相隔很远，可以考虑使用全局Event Bus。

// 新建eventBus.js
import Vue from "vue";
export const EventBus = new Vue();

我们可以在一个独立的文件eventBus.js中定义一个名为EventBus的全局Event Bus，它是一个Vue实例，可以使用$on方法来监听事件，使用$emit方法来触发事件。

例如，我们有三个组件，分别为父组件、子组件1和子组件2，子组件1监听自定义事件'my-event'，并通过Event Bus将监听到的信息发送给子组件2：

<!-- 父组件 -->
<template>
  <div>
    <child1></child1>
    <child2></child2>
  </div>
</template>
<script>
   import Child1 from './Child1.vue';
   import Child2 from './Child2.vue';
   export default {
       components:{
           Child1,
           Child2
       }
   }
</script>

<!-- 子组件1 -->
<template>
  <button @click="handleClick">点击发送信息</button>
</template>
<script>
   import {EventBus} from '@/eventBus.js';
   export default{
       data(){
           return{
               message:'这是来自子组件1的信息'
           }
       },
       methods:{
           handleClick(){
              EventBus.$emit('my-event', this.message);
           }
       }
   }
</script>

<!-- 子组件2 -->
<template>
  <div> {{message}} </div>
</template>
<script>
   import {EventBus} from '@/eventBus.js';
   export default{
       data(){
           return{
               message:''
           }
       },
       mounted(){
           EventBus.$on('my-event', (message) => {
               this.message = message;
           });
       }
   }
</script>

在子组件1中，用Event Bus触发自定义事件'my-event'，并将this.message作为参数。

在子组件2中，使用Event Bus监听自定义事件'my-event'，并在事件触发后将消息内容赋值给message变量。

4. 使用Event Bus进行组件通信

Event Bus是Vue.js的一个核心概念，它是一个简单的发布/订阅事件处理器。Event Bus是全局的，任何组件都可以用它来进行事件的订阅和发布。

在Vue CLI中使用Event Bus进行组件通信，可以通过以下两种方式来实现：

1）在Vue实例上定义Event Bus

我们可以通过在Vue实例上定义Event Bus的方式来实现组件之间的通信。例如：

// main.js
import Vue from 'vue'
import App from './App.vue'

export const eventBus = new Vue();

new Vue({
   el: '#app',
   render: h => h(App)
});

在Vue实例上定义了一个Event Bus，并导出export出去。在其他组件中引入Event Bus即可。

// ComponentA.vue
import {eventBus} from '../main.js';

export default{
   data(){
       return{
           count:0
       }
   },
   created(){
       eventBus.$on('increment', () => {
           this.count++;
       });
   }
}

在组件A中，使用eventBus.$on()方法监听'increment'事件。这个事件会被组件B触发。在回调函数中，组件A更新了它的内部数据。

// ComponentB.vue
import {eventBus} from '../main.js';

export default{
   methods:{
       increment(){
           eventBus.$emit('increment');
       }
   }
}

在组件B中，通过事件总线(event bus)触发了'increment'事件。发送给监听它的组件A。

2）在单独的模块中定义Event Bus

另一种方式是，在单独的模块中定义Event Bus，并暴露出去。在组件中引入该模块即可。

// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

// ComponentA.vue
import {eventBus} from '../eventBus';

// ComponentB.vue
import {eventBus} from '../eventBus';

这样我们可以非常轻松地在Vue组件中进行Event Bus的订阅和发布，实现组件之间的通信。

5. Vuex 进行组件通信

Vuex是Vue中一种简单、轻量级的状态管理模式，它采用了集中式存储管理应用的所有组件的状态(state)，并以相应的规则保证状态(state)以一种可预测的方式发生变化(mutations)。Vuex提供了一种在组件之间共享和管理状态的方式。

以下是在Vue CLI中使用Vuex进行组件通信的步骤：

1）安装和引入 Vuex

npm install vuex --save

在main.js中引入并安装Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

2）定义Vuex store

定义Vuex store需要Vue提供的createStore方法，我们需要在store.js中定义Vuex。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        count: 0
    },
    mutations:{
        increment(state){
            state.count++
        }
    }
});

export default store;

在state中定义了count为父组件的状态。在mutations中定义了一个名为increment的方法，这个方法可以修改count的值。

3）在Vue实例中使用Vuex

在Vue实例中使用Vuex，需要在main.js中import store并在Vue实例中使用它。

import Vue from 'vue'
import App from './App.vue'

import store from './store.js'

new Vue({
   el: '#app',
   store,
   render: h => h(App)
});

在Vue实例中，添加了store属性并将它设置为Vuex store的一个实例。

4）在组件中使用Vuex

在Vue组件中使用Vuex，例如：

<!-- 子组件 -->
<template>
   <div>
       <button @click="$store.commit('increment')">点击累加</button>
       <span> {{ $store.state.count }} </span>
   </div>
</template>

这里我们直接调用了increment mutations方法。

通过{{$store.state.count}}直接引用VUEX中状态数据。

这就实现了组件中使用Vuex来进行通信的目的。

在Vue中使用Vuex，能够方便快速地进行组件通信，并可以实现状态的集中管理和修改，保证数据流的一致性。不过Vuex也有它的缺点，当应用规模过大时，开销可能会变得太大，所以在引入Vuex时也需要根据实际情况来选择使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：在vue-cli中组件通信的方法 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • web前端vue实现插值文本和输出原始html

    要实现通过Vue进行插值文本和输出原始HTML，我们需要掌握以下几个核心概念： 插值表达式：Vue使用双括号{{}}进行插值，将绑定的数据渲染到模板中。 v-html指令：Vue中的v-html指令可用于输出被渲染为HTML的数据，但要注意防止XSS攻击。 以下是详细步骤： 1. 插值表达式 在Vue中，我们可以使用插值表达式来动态地将数据展示到模板中。插值…

    Vue 2023年5月28日
    00

  • Vue实现时间轴效果

    下面是“Vue实现时间轴效果”的完整攻略。 简介 时间轴是一种用于展示时间进程的方式，通常由一条水平线和上面分布的时间事件点组成。在网站设计中，时间轴常用于展示历史时间线、流程进程等内容。本次攻略将介绍如何使用Vue来实现基础的时间轴效果。 示例代码 首先我们来看一个简单的示例代码，它展示了一个简单的时间轴效果。 <template> <d…

    Vue 2023年5月28日
    00

  • vue2 使用@vue/composition-api依赖包 编译、打包各种报错问题分析

    “@vue/composition-api”是Vue官方推出的、用于支持Vue2使用Composition API的依赖包。使用该依赖包，可以方便地在Vue2中使用Vue3的Composition API特性来进行组合式开发。 但是，在编译、打包时可能会出现各种问题。下面是使用“@vue/composition-api”依赖包时的一些常见报错问题分析。 问题…

    Vue 2023年5月28日
    00

  • vue祖孙组件之间的数据传递案例

    这里给你讲解一下“Vue祖孙组件之间的数据传递案例”的完整攻略。 一、介绍 Vue提供了一种祖孙组件之间进行数据传递的方式。我们可以通过在父组件中提供一个数据属性，然后在子组件中使用prop接收这个值，来实现祖孙组件之间的数据传递。 二、示例 接下来，我们通过示例来演示祖孙组件之间的数据传递。假设有一个简单的应用程序，其中包含一个具有输入框的祖先组件和一个具…

    Vue 2023年5月28日
    00

  • Vue指令之 v-cloak、v-text、v-html实例详解

    Vue指令之 v-cloak、v-text、v-html实例详解 在Vue中，指令（Directive）是一种特殊的标记，可以在模板中使用，用于动态地将数据渲染到HTML中。指令以“v-”开头，例如v-bind、v-for等。除了常见的指令以外，Vue还提供了一些常用的指令，如v-cloak、v-text和v-html。 v-cloak v-cloak指令是…

    Vue 2023年5月27日
    00

  • vue 引用自定义ttf、otf、在线字体的方法

    下面是详细的 vue 引用自定义字体（包括ttf、otf、在线字体）的方法攻略说明： 1. 准备字体文件 首先需要准备好自定义字体文件，可以选择在本地寻找，也可以在网上搜索并下载。文件格式可以是ttf、otf等常见的字体文件格式。 2. 引用本地字体 2.1 在 CSS 中引用 首先需要将自定义字体文件放在项目的静态资源目录中，如 public 目录下的 f…

    Vue 2023年5月28日
    00

  • vue配置请求本地json数据的方法

    以下是详细讲解“Vue配置请求本地JSON数据的方法”的攻略。 1. 创建本地JSON文件 首先需要创建一个本地的JSON文件，可以将以下数据保存为data.json文件： { "name": "John", "age": 30, "gender": "male&quo…

    Vue 2023年5月28日
    00

  • vue引入css文件导致全局污染的问题

    下面是详细的讲解“Vue引入CSS文件导致全局污染的问题”的攻略。 什么是全局污染 全局污染是指在 JavaScript 中定义了一个全局变量，但是由于变量名与其他已有的全局变量或者框架中的属性名重复，导致变量被覆盖或污染，从而影响了程序的正常运行。在 Vue 中也同样会出现全局污染的问题。 Vue 引入 CSS 文件导致全局污染的问题 在 Vue 的组件化…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部