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

Vue2和Vue3的10种组件通信方式梳理

• Vue
yizhihongxing

Vue2和Vue3的10种组件通信方式梳理

Vue.js是一款用于构建用户界面的渐进式JavaScript框架，为单页应用提供了一系列有用的特性，如组件化、数据双向绑定、路由管理等。在Vue.js应用程序中，组件通信是非常重要的一环，本文将详细讲解Vue2和Vue3中的10种组件通信方式，以便开发者可以更好地应用这些技巧。

1. 父子组件通信

1.1 父传子

在Vue.js中，父组件可以通过props传递数据到子组件中，这种方式适用于父子组件之间的单向数据流通信。下面是一个示例：

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在上述示例中，通过父组件的message属性将Hello, World!传递给子组件，子组件将props中的message渲染到页面中。

1.2 子传父

子组件通过$emit方法触发父组件的事件来实现子传父的方式，下面是一个示例：

<template>
  <div>
    <button @click="emitMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message-to-parent', 'Hello, Parent!');
    }
  }
}
</script>

<template>
  <div>
    <child @message-to-parent="getChildMessage"></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  methods: {
    getChildMessage(message) {
      alert(message);
    }
  }
}
</script>

在上述示例中，子组件通过@click事件触发emitMessage方法，该方法通过$emit方法触发了父组件的message-to-parent事件，并传递了Hello, Parent!。父组件通过监听该事件，获取到了子组件传递的信息，并进行alert提示。

2. 兄弟组件通信

2.1 通过共同的父组件传递信息

可以通过共同的一个父组件来实现兄弟组件之间的通信，这种方式相当于将父组件作为兄弟组件之间的代理，将信息从一个组件传递到另一个组件。

<template>
  <div>
    <a v-on:click="setCurrent(name)">Set current component</a>
    <child-1 :current="current"></child-1>
    <child-2 :current="current"></child-2>
  </div>
</template>

<script>
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';

export default {
  components: {
    Child1,
    Child2
  },
  data() {
    return {
      current: ''
    }
  },
  methods: {
    setCurrent(name) {
      this.current = name;
    }
  }
}
</script>

在上述示例中，父组件通过click事件触发了setCurrent方法，该方法将当前组件名赋值给了current变量。通过子组件中props接收父组件中的current变量，进行渲染。这样，当某一个子组件props收到值的改变，当前页和其他页的相应数据都会变化。

2.2 使用Vue2中的事件总线

在Vue2中，可以通过创建一个Event Bus实例来实现兄弟组件之间的通信，该实例可作为一个中央事件总线，兄弟组件通过该实例来进行通信。

<template>
  <div>
    <button @click="send()">Send Message</button>
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  methods: {
    send() {
      EventBus.$emit('message', 'Hello, World!');
    }
  }
}
</script>

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    EventBus.$on('message', message => {
      this.message = message;
    });
  }
}
</script>

在上述示例中，使用EventBus.$emit触发message事件，子组件通过EventBus.$on监听该事件，并将接收到的数据赋值给了message变量。

2.3 使用Vue3中的provide/inject

Vue3中提供了新的API，provide/inject方法可以实现祖先组件向所有的后代子组件传递信息。这种方式比共同的父组件传递信息方式更加适用于跨组件传递复杂数据结构。

<template>
  <div>
    <child-1></child-1>
    <child-2></child-2>
  </div>
</template>

<script>
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import { provide } from 'vue';

export default {
  components: {
    Child1,
    Child2
  },
  setup() {
    const message = 'Hello, World!';
    provide('message', message);
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return {
      message
    }
  }
}
</script>

在上述示例中，父组件通过provide方法向后代子组件提供了message变量。后代子组件通过inject方法获取了message变量，并进行渲染显示。

3. 任意两个组件间通信

3.1 通过事件总线

事件总线可以用于任意两个组件之间的通信，只需创建一个全局的Event Bus实例，在各个组件之间进行信息交换即可。如示例2.2所示。

3.2 通过Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式，它可以贯穿整个应用的生命周期，并将组件状态作为中央存储库进行管理，为组件之间提供了双向绑定的响应式数据流通信机制。

<template>
  <div>
    <button @click="setMessage">Set Message</button>
    <child></child>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['setMessage']),
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message']),
  }
}
</script>

在上述示例中，通过mapMutations将setMessage方法映射到当前组件中，点击按钮后通过该方法修改Vuex中的message变量。子组件中通过mapState将Vuex中的message变量映射到组件中进行渲染。这样，两个组件就实现了信息的交换。

3.3 使用全局函数

全局函数可以用于在任何组件之间方便地进行通信，只需在Vue实例上挂载一个方法即可，示例如下：

Vue.prototype.$myFunction = function(message) {
  console.log(message);
}

在其中一个组件中调用该方法：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$myFunction('Hello, World!');
    }
  }
}
</script>

在另一个组件中接收该方法：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.$root.$on('myFunction', message => {
      this.message = message;
    });
  }
}
</script>

在上述示例中，将全局函数绑定到Vue.prototype上，在发送组件中使用this.$myFunction触发函数，在接收组件中通过this.$root.$on监听该函数，在函数被触发时，接收组件将message赋值给了本地变量进行渲染。

本文仅是对Vue2和Vue3中组件通信方式的简单梳理，在实际开发中，还需结合具体的业务需求，来选择适用的通信方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue2和Vue3的10种组件通信方式梳理 - Python技术站

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

相关文章

  • three.js 利用uv和ThreeBSP制作一个快递柜功能

    下面我将详细讲解通过利用uv和ThreeBSP制作一个快递柜功能的完整攻略。 1. 什么是ThreeBSP ThreeBSP是一种能够用于对Three.js中的3D模型进行布尔运算（Union、Intersection、Difference）的工具。有了 ThreeBSP，我们就可以用简单的API调用对3D模型的形状进行编辑、剖分、重组等操作，非常方便。 2…

    Vue 2023年5月28日
    00

  • 详解在vue-cli中使用graphql即vue-apollo的用法

    下面我将详细讲解vue-cli中使用graphql及vue-apollo的用法。具体步骤如下： 环境准备 在使用vue-cli和vue-apollo之前，需要先安装Node.js和npm。这里推荐使用最新版本的Node.js和npm。 安装vue-cli Vue-cli是Vue.js官方提供的工具，用于快速搭建Vue.js项目。通过vue-cli可以帮助我们…

    Vue 2023年5月28日
    00

  • vue+element表格实现多层数据的嵌套方式

    实现多层数据的嵌套方式，可以通过使用Element UI table组件来实现。具体步骤如下： 步骤1：定义表格结构 首先要定义表格的结构，包括表头的内容和渲染每行数据的方式。Vue的template语法可以很方便地组织表格结构，示例代码如下： <template> <el-table :data="tableData"…

    Vue 2023年5月27日
    00

  • Vue extend的基本用法(实例详解)

    Vue.extend的基本用法 介绍 Vue.extend是Vue.js提供的扩展一个构造函数的功能。扩展一个构造函数，可以使用基础 Vue 构造器，创建一个“子类”，允许在它基础上拓展一些功能。Vue.extend返回的是一个新的构造器，我们可以基于这个构造器创建出新的Vue实例。 语法 Vue.extend(options) options：选项对象，提…

    Vue 2023年5月28日
    00

  • vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

    首先需要明确的是，针对 vue+elementUI(el-upload) 图片压缩的操作，实际上是对于上传的图片进行处理，通过 JS 将图片进行压缩，最终实现 web 应用中图片大小的限制。 接下来，我们将分别从以下三个方面对此进行详细讲解： 图片选择与压缩 解决压缩后图片失去原有宽高比例的问题 示例说明 1. 图片选择与压缩 我们可以通过 elementU…

    Vue 2023年5月28日
    00

  • vue 实现无规则截图

    Vue实现无规则截图的攻略如下： 简介 无规则截图功能可以让用户自由选择截取区域，而不被固定的截图大小或位置所限制。Vue.js是一款流行的JavaScript框架，能够帮助我们快速搭建交互式单页面应用程序。下面将介绍如何使用Vue.js实现无规则截图功能。 实现步骤 1. 安装依赖 要使用Vue.js实现截图功能，我们需要安装easy-vue-croppe…

    Vue 2023年5月27日
    00

  • 7个很棒的Vue开发技巧分享

    7个很棒的Vue开发技巧分享 简介 Vue是一个流行的JavaScript框架，能够快速、高效地开发交互式Web应用程序。在此强大的框架中，有一些技巧可以帮助开发人员更好地利用Vue的优势。在这篇文章中，我们将介绍7个很棒的Vue开发技巧供您参考。 1. 使用computed属性计算属性 Vue的computed属性可以通过其他状态（如data）的值计算出一…

    Vue 2023年5月27日
    00

  • 分享7个成为更好的Vue开发者的技巧

    分享7个成为更好的Vue开发者的技巧 作为一名Vue开发者，提高技能水平是非常重要的，下面是分享7个成为更好的Vue开发者的技巧： 1. 熟悉Vue的核心概念 Vue的核心概念包括：模板语法、组件、生命周期等，必须要熟悉和掌握它们，才能更好地开发Vue应用。 示例代码： <template> <div> <h3>{{ me…

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