Vue 通信方式

最新推荐文章于 2022-10-31 16:26:18 发布
最新推荐文章于 2022-10-31 16:26:18 发布
阅读量153 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CEZLZ/article/details/120326352
版权

在这里插入图片描述

文章目录

1 各种组件之间通信方式

在这里插入图片描述

2 祖孙组件之间通信

对于组件层次结构比较深的的情况，祖先组件使用 provide 选项来提供数据，子孙组件使用 inject 选项来使用这些数据。

<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const { createApp, components } = Vue;

	// 子孙组件
    const childrenComponent = {
      template: "<div>{{ name }}</div>",
      inject: ["name"]
    };

	// 父组件
    const parentComponent = {
      template: "<children-component></children-component>",
      components: {
        childrenComponent,
      },
    };

	// 根组件/祖先组件
    const Root = {
      template: "<parent-component></parent-component>",
      provide: {
        name: 'rootName',
      },
      components: {
        parentComponent,
      },
    };

    const app = createApp(Root);

    app.mount("#app");
  </script>
</body>

但是，如果我们尝试在此处 provide 一些祖先组件的实例 property，这将不起作用的：

// 错误写法
const Root = {
  template: "<parent-component></parent-component>",
  data: function () {
    return {
      name: "RootComponent",
    };
  },
  provide: {
    name: this.name,  // 无法传递给子孙组件
  },
  components: {
    parentComponent,
  },
};

// 正确写法
// 如果要访问组件实例 property，需要将 provide 转换为返回对象的函数。
const Root = {
  template: "<parent-component></parent-component>",
  data: function () {
    return {
      name: "RootComponent",
    };
  },
  provide(){
    return {
    	name: this.name,
	}
  },
  components: {
    parentComponent,
  },
};

🚨 注意：上面代码通过 provide 和 inject 实现了祖先组件和子孙组件的通信，但是这种通信是单向的，也就是说，数据只能由祖先组件传递给子孙组件。

3 父子组件之间通信

在这里插入图片描述
对于父子组件之间的通信，父组件可以使用 props 把数据传递给子组件，子组件通过 $emit() 把数据传递给父组件。


1️⃣ 父组件传递数据给子组件

<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const { createApp, components } = Vue;

    const childrenComponent = {
      template: "<div>{{ des }}</div>",
      props: ['des'],
    };

    const parentComponent = {
      template: "<children-component des='我是父组件传递过来的数据'></children-component>",
      components: {
        childrenComponent,
      },
    };

    const Root = {
      template: "<parent-component></parent-component>",
      components: {
        parentComponent,
      },
    };

    const app = createApp(Root);

    app.mount("#app");
  </script>
</body>

上面代码中，子组件通过 props 选项来接收父组件传递过来的数据。


2️⃣ 子组件传递数据给父组件

步骤一已经实现数据从父组件传递到子组件，那么如何实现数据从子组件传递到父组件呢？
子组件可以通过 $emit() 来触发事件，并把需要传递给父组件的数据当做参数传递给父组件。

<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const { createApp, components } = Vue;

    const childrenComponent = {
      template: "<div><button @click='sendToParent'>传递数据</button></div>",
      methods: {
        sendToParent() {
          let message = "我是子组件传递过来的数据";
          this.$emit("sendMessage", message);
        },
      },
    };

    const parentComponent = {
      template:
        "<children-component @sendMessage='getMessage'></children-component>",
      components: {
        childrenComponent,
      },
      methods: {
        getMessage(e) {
          console.log(e); // 我是子组件传递过来的数据
        },
      },
    };

    const Root = {
      template: "<parent-component></parent-component>",
      components: {
        parentComponent,
      },
    };

    const app = createApp(Root);

    app.mount("#app");
  </script>
</body>

4 兄弟组件之间通信

在这里插入图片描述
1️⃣ EventBus

<body>
  <div id="app"></div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const eventBus = new Vue();

    const brotherComponent = {
      template: "<div><button @click='sendToSister'>传递数据</button></div>",
      created() {
        eventBus.$on("sendMessageToBrother", (e) => {
          console.log(e);
        });
      },
      methods: {
        sendToSister() {
          let message = "我是哥哥传递过来的数据";
          eventBus.$emit("sendMessageToSister", message);
        },
      },
    };

    const sisterComponent = {
      template: "<div><button @click='sendToBrother'>传递数据</button></div>",
      created() {
        eventBus.$on("sendMessageToSister", (e) => {
          console.log(e);
        });
      },
      methods: {
        sendToBrother() {
          let message = "我是妹妹传递过来的数据";
          eventBus.$emit("sendMessageToBrother", message);
        },
      },
    };

    const rootComponent = {
      template: `<div>
          <brother-component></brother-component>
          <sister-component></sister-component>
        </div>
        `,
      components: {
        brotherComponent,
        sisterComponent,
      },
    };

    new Vue({
      el: "#app",
      template: "<root-component></root-component>",
      components: {
        rootComponent,
      },
    });
  </script>
</body>

上面代码中，使用 eventBus.$emit() 来替代 this.$emit() 触发自定义事件。在需要接收数据的组件的 created 钩子函数使用 eventBus.$on() 监听事件。


2️⃣ 利用父组件充当中间人

在这里插入图片描述

和父子组件通信原理相同。

5 任意组件之间通信

任意组件之间通信的方式有2种：Vuex 和 EventBus。

CEZLZ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 组件通信
weixin_42695446的博客
12-04 233
Vue 自定义事件
Vue 组件间通信方式
珍妮的小罐君
05-31 296
前言 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如p...
vue中常用的几种通信方式
dwdqqwd的博客
10-31 256
vue通信方式
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue 组件通信的几种方式
piaojiancong的博客
02-28 6197
vue组件通信的N种方式。
vue通信方式EventBus的实现代码详解
10-16
主要介绍了vue通信方法EventBus的实现代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中各种通信传值方式总结
10-17
在本篇文章里小编给大家分享了关于vue中各种通信传值方式的相关知识点，有兴趣的朋友们学习下。
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
详解vue组件通信的三种方式
12-09
本质是通过派发事件然后监听事件从而更改值，(父子组件通信也可用这个方式，但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转，这种方式我这里就不做演示的了，因为我的题目是非父子通信) ...
Vue-ls 详解
-ELZ-
08-21 1万+
Vue-ls 的详解 官方网址 作用 Vue-ls 是 Vue 的一个插件，用于操作 Local Storage(本地存储)、Session Storage(会话存储)、Memory(内存存储)。 安装 CDN https://unpkg.com/vue-ls NPM npm install vue-ls --save Yarn yarn add vue-ls 使用 import Vue from 'vue' import Storage from 'vue-ls' // vue-ls
NProgress 的使用
-ELZ-
08-24 7324
NProgress 的使用 NProgress 是前端轻量级 web 进度条插件 安装 NPM npm install nprogress --save 或 yarn add nprogress CDN https://unpkg.com/nprogress@0.2.0/nprogress.js https://unpkg.com/nprogress@0.2.0/nprogress.css 基本使用 NProgress 一般搭配路由守卫使用 import NProgress from 'npro
简单学习一下 Pinia
-ELZ-
03-18 1949
文章目录引入 Pinia创建 Store在组件中读取 Store 数据在组件中修改 Store 数据对 Store 进行解构修改 Store 状态数据的多种方式Getters 的使用Store 的互相调用 引入 Pinia 首先在 main.ts 中引入 pinia，通过 createPinia 创建 pinia 实例，然后挂载到 Vue 根实例上。 import { createApp } from 'vue' import App from './App.vue' import { createPini
使用命令创建 VUE 项目
-ELZ-
03-23 1268
第一步：检查 vue/cli 的版本 只有当 vue/cli 的版本高于 4.0 才可以使用命令创建 vue 项目 第二步 使用 vue create 项目名 创建项目 项目名不能包含大写字母，否则会创建失败 第三步：选择默认配置还是手动配置 选项一：默认配置 选项二：手动配置 （选择了手动配置） 第四步：根据项目需求选择配置项 空格：选中或取消 a：全选或全取消 上下箭头：移动到某一项 回车：进入下一步 （选择了1、4、5、6、7） Babel：Babel 编译器，可以将高级语
Vue：获取 select 标签的说明文本
-ELZ-
03-29 1069
需求： 获取 select 标签的说明文本 方法： 给 select 标签绑定 ref 属性，通过下列方法来获取对应的 select 的说明文本。 this.$refs[xxx][0].selectedOptions[0].label this.$refs[xxx][0].selectedOptions[0].innerHTML this.$refs[xxx][0].selectedOptions[0].innerText HTML <tr v-for="v in list" :key="v.i
axios 在 Vue 中的三种使用方式
-ELZ-
08-20 909
axios 在 Vue 中的使用方式 axios 是一个库，不是 Vue 中的第三方插件，所以使用时不能通过 Vue.use() 来安装。 绑定到原型链 一般在项目的入口文件 main.js 中引入并绑定到原型链上 // main.js import Vue from 'vue' import axios from 'axios' // 绑定到原型链上 Vue.prototype.$http = axios axios.defaults.baseURL = 'https://www.baidu.com/'
Vue.js的安装方法
-ELZ-
02-01 457
第一种方法：独立版本 我们可以在Vue.js的官网上直接下载vue.min.js并用<script>标签引入 下载Vue.js：https://vuejs.org/js/vue.min.js 下载后命名为vuejs.org（名字随意，但后缀名一定要org）。如图： 接下来就是引入到index.html里面。如图： 第二种方法：使用CDN方法 以下推荐几个CDN： ...
VUE -- 前端项目初始化步骤
-ELZ-
05-05 334
步骤 安装 Vue 脚手架 通过 Vue 脚手架创建项目：vue ui（打开ui面板） 配置 Vue 路由 配置 Element-UI 组件库 配置 axios 库 初始化 git 远程仓库 将本地项目托管到 Github 或 码云 中 第一步：安装 Vue 脚手架 第二步：通过脚手架创建项目 1 打开 c...
可复用 & 组合--④：Teleport
-ELZ-
08-18 183
Teleport 基本用法 Teleport 提供了一种方法，允许我们控制在 DOM 中哪个父节点下渲染 HTML。 默认情况下 <body> <div id="app"> <my-component></my-component> </div> <script src="https://unpkg.com/vue@next"></script> <script> const {
事件修饰符
-ELZ-
10-18 164
文章目录1️⃣ `.stop`2️⃣ `.prevent`3️⃣ `.capture`4️⃣ `.self`5️⃣ `.once`6️⃣ `.passive` 1️⃣ .stop 作用：阻止单击事件继续传播（阻止事件冒泡和事件捕获） <template> <div @click="divClick"> <button @click="btn1Click">按钮_1</button> <button @click.stop="btn2.
vue组件通信的方式
最新发布
07-27
Vue 组件通信的方式有多种，以下是几种常见的方式： 1. Props & Events：父组件通过 props 向子组件传递数据，子组件...以上是一些常见的 Vue 组件通信方式，选择适合场景的方式可以使组件之间的通信更加便捷和灵活。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值