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

vue的组件通讯方法总结大全

• Vue
yizhihongxing

我来为你详细讲解一下“Vue的组件通讯方法总结大全”的完整攻略。

1. 组件通讯方法概述

在Vue的组件化开发中，组件之间的通讯是必不可少的。Vue提供了多种组件通讯方法，包括：

  • 父子组件通讯：父组件通过props向子组件传递数据，子组件通过emit触发事件向父组件传递数据。
  • 兄弟组件通讯：通过一个共同的父组件来实现兄弟组件通讯，即父组件先接收兄弟组件的数据，再把数据传递给另一个兄弟组件。
  • 跨级组件通讯：使用provide/inject或者$attrs/$listeners实现跨级组件通讯。
  • 非父子组件通讯：使用$emit/$on、事件总线、Vuex等方式实现非父子组件的通讯。

下面我们将详细讲解这些通讯方式的实现方式及示例。

2. 父子组件通讯

父组件向子组件传递数据：

父组件中的模板代码：

<template>
  <div>
    <hello-world :msg="message"></hello-world>
  </div>
</template>

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

  export default {
    name: 'app',
    components: {
      HelloWorld
    },
    data() {
      return {
        message: 'Hello World'
      }
    }
  }
</script>

子组件中的模板代码：

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    name: 'hello-world',
    props: {
      msg: String
    }
  }
</script>

在上述示例中，我们通过在父组件中使用子组件并传递props的方式向子组件传递了一个名为message、值为'Hello World'的数据。在子组件中，我们通过props接收传递过来的数据并展示在页面上。

子组件向父组件传递数据：

子组件中的模板代码：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
  export default {
    name: 'hello-world',
    methods: {
      handleClick() {
        this.$emit('send-message', 'Child component sends a message to parent component');
      }
    }
  }
</script>

父组件中的模板代码：

<template>
  <div>
    <hello-world :msg="message" @send-message="handleSendMessage"></hello-world>
  </div>
</template>

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

  export default {
    name: 'app',
    components: {
      HelloWorld
    },
    data() {
      return {
        message: 'Hello World'
      }
    },
    methods: {
      handleSendMessage(msg) {
        console.log(msg);
      }
    }
  }
</script>

在上述示例中，我们在子组件中通过$emit方法触发了一个名为'send-message'的自定义事件，并向父组件传递了一个字符串类型的msg参数。在父组件中，我们通过在子组件上绑定@send-message事件来监听子组件中触发的事件，同时定义了一个handleSendMessage方法来接收传递过来的msg参数并打印到控制台上。

3. 兄弟组件通讯

由于兄弟组件之间没有直接的通讯方式，因此我们需要通过一个共同的父组件来实现兄弟组件之间的通讯。

父组件中的模板代码：

<template>
  <div>
    <hello-world-1 @send-message="handleSendMessage"></hello-world-1>
    <hello-world-2 :msg="message"></hello-world-2>
  </div>
</template>

<script>
  import HelloWorld1 from './HelloWorld1.vue';
  import HelloWorld2 from './HelloWorld2.vue';

  export default {
    name: 'app',
    components: {
      HelloWorld1,
      HelloWorld2
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      handleSendMessage(msg) {
        this.message = msg;
      }
    }
  }
</script>

兄弟组件1中的模板代码：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
  export default {
    name: 'hello-world-1',
    methods: {
      handleClick() {
        this.$emit('send-message', 'Sibling component 1 sends a message to sibling component 2');
      }
    }
  }
</script>

兄弟组件2中的模板代码：

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    name: 'hello-world-2',
    props: {
      msg: String
    }
  }
</script>

在上述示例中，我们在父组件中声明了两个兄弟组件，并通过handleSendMessage方法实现了兄弟组件之间的数据传递。在兄弟组件1中，我们通过$emit方法触发了一个名为'send-message'的自定义事件，并向父组件传递了一个字符串类型的msg参数。在父组件中，我们通过handleSendMessage方法将传递过来的msg参数赋值给message属性，并作为props传递给了兄弟组件2中。在兄弟组件2中，我们通过props接收传递过来的数据并展示在页面上。

4. 跨级组件通讯

使用provide/inject实现跨级组件通讯：

父组件中的模板代码：

<template>
  <div>
    <hello-world></hello-world>
  </div>
</template>

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

  export default {
    name: 'app',
    components: {
      HelloWorld
    },
    provide() {
      return {
        message: 'Hello World'
      }
    }
  }
</script>

子组件中的模板代码：

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    name: 'hello-world',
    inject: ['message'],
    computed: {
      msg() {
        return this.message + ' from Inject';
      }
    }
  }
</script>

在上述示例中，我们在父组件中通过provide方法提供了一个名为message、值为'Hello World'的数据。在子组件中，我们通过inject选项注入了父级提供的message数据，并使用computed计算属性将其拼接后展示在页面上。

使用$attrs/$listeners实现跨级组件通讯：

父组件中的模板代码：

<template>
  <div>
    <hello-world v-bind="$attrs" v-on="$listeners"></hello-world>
  </div>
</template>

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

  export default {
    name: 'app',
    components: {
      HelloWorld
    },
  }
</script>

子组件中的模板代码：

<template>
  <div>
    <button v-bind="$attrs" v-on="$listeners">Click me</button>
  </div>
</template>

<script>
  export default {
    name: 'hello-world'
  }
</script>

在上述示例中，我们在父组件中通过$attrs/$listeners将所有的props和自定义事件传递给了子组件，实现了跨级组件的通讯。在子组件中，我们通过v-bind和v-on绑定了父组件传递过来的数据和事件。

5. 非父子组件通讯

使用$emit/$on实现非父子组件通讯：

示例中包含三个组件，分别为A、B、C组件。A组件与B组件为父子组件，B组件与C组件为兄弟组件，A与C组件则为非父子组件。

A组件中的模板代码：

<template>
  <div>
    <my-son></my-son>
  </div>
</template>

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

  export default {
    name: 'MyParent',
    components: {
      MySon
    },
    methods: {
      sendMessage(msg) {
        this.$emit('send-message', msg);
      }
    }
  }
</script>

B组件中的模板代码：

<template>
  <div>
    <my-bro></my-bro>
  </div>
</template>

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

  export default {
    name: 'MySon',
    components: {
      MyBro
    },
    methods: {
      handleSendMessage(msg) {
        this.$emit('send-message', msg);
      }
    }
  }
</script>

C组件中的模板代码：

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

<script>
  export default {
    name: 'MyBro',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      this.$on('send-message', this.handleReceiveMessage);
    },
    methods: {
      handleReceiveMessage(msg) {
        this.message = msg;
      }
    }
  }
</script>

在上述示例中，我们在A组件中定义了一个sendMessage方法，并通过$emit方法向外发送一个名为'send-message'的自定义事件和一个字符串参数。接着，在B组件中，我们同样通过$emit方法向外发送一个名为'send-message'的自定义事件和一个字符串参数。在C组件中，我们通过mounted钩子函数注册了一个名为'send-message'的自定义事件，并在handleReceiveMessage方法中接收和处理传递过来的数据。

使用事件总线实现非父子组件通讯：

为了实现事件总线，在Vue实例中添加一个空的Vue实例作为事件中心。

// 使用事件总线
const bus = new Vue();

// 在Vue实例中添加事件中心
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  data: {
    bus: bus
  }
})

代码说明：

在Vue实例外创建一个空的Vue实例，作为事件总线。在Vue实例中，将事件中心(bus)作为data传递给组件。在组件中可以通过this.$root.bus的方式来访问事件总线。

在组件中，使用事件总线进行通讯：

// 在组件中使用事件总线
this.$root.bus.$emit('send-message', 'Non-parent/child component communicates via event bus');

在组件中，我们可以通过this.$root.bus来访问事件总线并使用$emit方法向外发送一个名为'send-message'的自定义事件和一个字符串参数。

另外，接收事件也可以使用事件总线：

// 接收事件
this.$root.bus.$on('send-message', msg => {
  console.log(msg);
});

在组件中，我们可以通过this.$root.bus来访问事件总线并使用$on方法监听名为'send-message'的自定义事件。事件触发后，会执行定义的回调函数并接收到传递过来的数据，最后将数据打印到控制台上。

以上就是“Vue的组件通讯方法总结大全”的详细攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue的组件通讯方法总结大全 - Python技术站

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

相关文章

  • vue中添加mp3音频文件的方法

    下面是详细讲解 Vue 中添加 mp3 音频文件的方法的完整攻略。 1.准备工作 在 Vue 项目的 public 目录下创建 audio 目录，并将需要添加的 mp3 音频文件放置在该目录下。 2.添加音频标签 在需要添加音频的组件中，使用 HTML5 音频标签 audio，并为其设置 src 属性为音频文件的相对路径： <audio src=&qu…

    Vue 2023年5月27日
    00

  • Vue手把手教你撸一个 beforeEnter 钩子函数

    首先我们来介绍一下Vue的导航守卫和beforeEnter钩子函数。 Vue是一个具有完善导航功能的框架，而在Vue路由中，我们可以定义许多导航守卫，包括beforeEach、beforeResolve、afterEach等等。每个导航守卫都有自己的用途，beforeEach在跳转路由之前进行拦截，beforeResolve在路由解析时进行拦截，而after…

    Vue 2023年5月28日
    00

  • VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法

    如果您想在VSCode中快速地生成.vue文件的模板代码，可以使用Vue VSCode Snippets插件。这个插件提供了一系列可以用于在Vue项目中快速生成模板代码的人性化代码片段，例如template、script等。不仅如此，这个插件还支持自定义模板，您可以修改定义对于其他模板的方法，以实现更加高效的开发。 下面是详细的操作过程： 安装Vue VSC…

    Vue 2023年5月28日
    00

  • 详解Vue3中对VDOM的改进

    Vue 3 是最新的Vue.js版本，该版本带来了许多对VDOM的改进。这里我们将详细讲解Vue3中对VDOM的改进。 一、什么是VDOM？ 虚拟DOM（Virtual DOM）是React和Vue等一些现代JavaScript框架背后的核心技术之一。虚拟DOM是一个轻量级的JavaScript对象，它描述了真实DOM的层次结构和属性，是一个表示DOM状态的…

    Vue 2023年5月28日
    00

  • Vue收集表单数据和过滤器总结

    Vue收集表单数据和过滤器总结 本文主要介绍Vue中如何收集表单数据和使用过滤器进行数据处理。 收集表单数据 v-model指令 v-model指令可以实现双向数据绑定，将表单元素的值与Vue实例的数据属性进行绑定。当表单元素的值发生变化时，对应的数据属性也会更新。 示例一： <template> <div> <input ty…

    Vue 2023年5月27日
    00

  • vue动态绑定ref(使用变量)以及获取方式

    在Vue中，我们经常需要对DOM元素进行操作，比如获取dom元素的数值或进行样式改变，这时我们就需要获取到DOM元素的引用。Vue提供了ref属性，可以用来获取dom元素的引用。本文将详细介绍如何使用动态绑定ref以及获取dom元素的方法。 动态绑定ref Vue的ref属性可以绑定到元素身上，当元素渲染后，这个元素会挂载到vm.$refs或this.$re…

    Vue 2023年5月27日
    00

  • vue项目环境搭建 启动 移植操作示例及目录结构分析

    下面就来详细讲解一下“vue项目环境搭建 启动 移植操作示例及目录结构分析”的攻略。 1. 环境搭建 在开始开发 Vue 项目之前，需要先搭建好相应的环境，具体步骤如下： 1.1 安装 Node.js 在 Node.js 官网下载最新版的 Node.js 后进行安装，这里不做过多介绍。 1.2 安装 Vue CLI Vue CLI 是 Vue 的脚手架工具，…

    Vue 2023年5月28日
    00

  • vue前端RSA加密java后端解密的方法实现

    要实现前端Vue使用RSA加密数据，后端Java进行解密的过程，需要完成以下步骤： 1.在前端Vue中引入RSA库 在前端Vue中，可以使用jsencrypt这个RSA库来实现加密。可以使用npm安装： npm install jsencrypt 然后，在Vue组件中引入： import JSEncrypt from ‘jsencrypt’ 2.在前端Vue…

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