一文搞懂Vue2中的组件通信

目录
  • vue 组件通信方式
  • 1.props传参
  • 2.emit,on通信
  • 3.$ref,$children实例通信
  • 4.$parent通信
  • 5.插槽通信(一般不用)
  • 6.$attr,$listener深层双向通信
  • 7.provide,inject依赖注入深层次单向通信
  • 8.$bus事件总线全局通信

vue 组件通信方式

1.父组件将自己的状态分享给子组件使用;

方法:父组件通过子标签传递数据,子组件通过 props 接收

2.子组件改变父组件的状态;

方法:父组件在子标签上通过@abc 提供一个改变自身状态的方法,子组件通过$emit("abc", payload)触发这个函数

3.父组件直接改变子组件的状态;

方法:父组件设法($ref,$children[0])拿到子组件实例对象,然后通过实例对象直接修改子组件状态

4.子组件直接改变父组件的状态

方法:子组件通过$parent拿到父组件的改变自身状态的方法,然后直接调用($parent 可以拿到父组件状态,但是最好不要直接修改,而是通过父组件函数式修改,保持单向数据流)

5.父组件通过插槽向子组件传递数据

方法:子组件定义具名插槽,父组件向插槽内传递自己的状态

6.父组件向后代组件传值

方法:父组件正常在标签上向子组件传递数据,子组件不用 props 接收属性,通过$attrs获取属性,通过$listeners 获取方法。子组件再向下传递时,使用 v-bind="$attr"传递属性,使用v-on="$listeners"传递方法

7.父组件向后代组件传值

方法:父组件js中定义provide函数提供数据源,后代组件通过inject去接收,inject可以是一个数组或对象。

注意:父组件提供的数据源如果不是响应式的,那么后代修改数据,数据不会响应变化。如果父组件提供的数据源是响应式的,但是不是一个对象,那么它也不是响应式的,所以要用对象在外包一层对象(数组不行)。另外,如果子组件同时provide一个inject祖先组件相同名称的数据,那么子组件的后代会就近使用子组件的数据。

官网tip:provide 和 inject绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

8.全局通信-事件总线

方法:通过注册一个新的vue实例作为桥梁,使用$on和$emit来完成通信

9.全局通信-vuex

略(看官方文档喽)

1.props传参

// 父组件向子组件传递msg
<template>
  <div>
    <p>我是dad</p>
    <Child :msg="msg" />
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      msg: "父亲的忠告",
    };
  },
};
</script>

// 子组件props接收
<template>
  <div>
    <p>我是子组件</p>
    <span>{{ msg }}</span>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: "什么都没有",
    },
  },
};
</script>

2.emit,on通信

// 父组件向子组件提供改变自己状态的函数
<template>
  <div>
    <p>我是dad</p>
    <Child @changeMyMind="changeMyMind" />
    <span>{{ mind }}</span>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      mind: "伟大万岁",
    };
  },
  methods: {
    changeMyMind(yourMind) {
      this.mind = yourMind;
    },
  },
};
</script>

// 子组件不用接收,直接通过$emit触发并传参就行
<template>
  <div>
    <p>我是子组件</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit("changeMyMind", "躺平鸟");
  },
};
</script>

3.$ref,$children实例通信

// 父组件通过$ref或者$children拿到子组件实例,然后直接修改子组件状态
/**
 * this.$children`数组中的元素不是响应式的,并且下标并不一定对用父组件引用的子组件的顺序,例如有异步加载的子组件,可能影响其在 children 数组中的顺序。所以使用时需要根据一定的条件例如子组件的name去找到相应的子组件。
 **/
<template>
  <div>
    <p>我是dad</p>
    <Child ref="childRef" />
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  mounted() {
    // this.$children[0].childMsg = "不你不是";
    this.$refs.childRef.childMsg = "不你不是";
  },
};
</script>

// 子组件等着被改就行
<template>
  <div>
    <p>我是子组件</p>
    <span>{{ childMsg }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMsg: "我是子组件数据",
    };
  },
};
</script>

4.$parent通信

// 父组件
<template>
  <div>
    <p>我是dad</p>
    <Child />
    <span>{{ aa }}</span>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      aa: "",
    };
  },
  methods: {
    changeAa(data) {
      this.aa = data;
    },
  },
};
</script>

// 子组件通过$parent拿到父组件实例,然后直接修改父组件状态
<template>
  <div>
    <p>我是子组件</p>
    <span>{{ childMsg }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMsg: "我是子组件数据",
    };
  },
  mounted() {
    // this.$parent.aa = "我改了哈"; 不推荐
    this.$parent.changeAa("我改了哦");
  },
};
</script>

5.插槽通信(一般不用)

// 父组件
<template>
  <div>
    <p>我是dad</p>
    <Child>
      <template v-slot:boring>
        {{ aa }}
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      aa: "父组件的数据哦",
    };
  },
};
</script>

// 子组件定义插槽
<template>
  <div>
    <p>我是子组件</p>
    <slot name="boring"></slot>
  </div>
</template>

<script>
export default {};
</script>

6.$attr,$listener深层双向通信

// 父组件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadData }}</span>
    <Son :dadData="dadData" @changeDadData="changeDadData" @keyup="someKeyUp" />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  data() {
    return {
      dadData: "父组件的数据哦",
    };
  },
  methods: {
    changeDadData(newData) {
      this.dadData = newData;
    },
    someKeyUp(e) {
      console.log(e.target.value);
    },
  },
};
</script>

// 儿子组件
<template>
  <div>
    <p>我是儿子组件</p>
    <span>{{ $attrs.dadData }}</span>
    <input type="text" v-on="$listeners" />
    <GrandSon v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";

export default {
  components: {
    GrandSon,
  },
  mounted() {
    console.log(this.$listeners);
  },
};
</script>

// 孙子组件
<template>
  <div>
    <p>我是孙子组件</p>
    <input type="text" @input="grandsonInput" />
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      //   this.$emit("changeDadData", e.target.value); 也可以触发
      this.$listeners.changeDadData(e.target.value);
    },
  },
};
</script>

7.provide,inject依赖注入深层次单向通信

// 父组件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadMessage }}</span>
    <Son />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  provide() {
    return {
      message: this.dadMessage,
    };
  },
  data() {
    return {
      dadMessage: {
        textContent: "我是个祖先数据",
      },
    };
  },
};
</script>

// 儿子组件
<template>
  <div>
    <p>我是儿子组件</p>
    <span>{{ theData }}</span>
    <GrandSon />
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";

export default {
  components: {
    GrandSon,
  },
  inject: {
    // 起个别名
    theData: {
      // 数据来源映射
      from: "message",
      // 默认值
      default: () => ({ message: { textContent: "啥也不是" } }),
    },
  },
};
</script>

// 孙子组件
<template>
  <div>
    <p>我是孙子组件</p>
    <input type="text" @input="grandsonInput" />
    <span>{{ message.textContent }}</span>
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      this.message.textContent = e.target.value;
    },
  },
  inject: ["message"],
};
</script>

8.$bus事件总线全局通信

// 父组件通过this.$bus.$on监听事件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadData }}</span>
    <Son />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  data() {
    return {
      dadData: "我是爹地",
    };
  },
  mounted() {
    this.$bus.$on("changeDadData", this.changeDadData);
  },
  methods: {
    changeDadData(newData) {
      this.dadData = newData;
    },
  },
  // 记得清除监听
  beforeDestroy() {
    this.$bus.$off("changeDadData");
  },
};
</script>

// 孙子组件通过this.$bus.$emit触发事件
<template>
  <div>
    <p>我是孙子组件</p>
    <input type="text" @input="grandsonInput" />
    <span></span>
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      this.$bus.$emit("changeDadData", e.target.value);
    },
  },
};
</script>

到此这篇关于一文搞懂Vue2中的组件通信的文章就介绍到这了,更多相关Vue2组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解Vue2中组件间通信的解决全方案

    前言 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,下面这篇文章将给大家介绍关于Vue2组件间通信的相关内容,下面话不多说,来一起看看详细的介绍. 组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> <Child :child-msg="msg"></Child> </templat

  • vue2.0父子组件间通信的实现方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] };} 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arra

  • Vue2单一事件管理组件通信

    本文为大家分享了vue $emit 和 $on 组件通信,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <scri

  • 一文搞懂Vue2中的组件通信

    目录 vue 组件通信方式 1.props传参 2.emit,on通信 3.$ref,$children实例通信 4.$parent通信 5.插槽通信(一般不用) 6.$attr,$listener深层双向通信 7.provide,inject依赖注入深层次单向通信 8.$bus事件总线全局通信 vue 组件通信方式 1.父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 2.子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改

  • 一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

    目录 前言 传递工厂函数作为参数 传递对象类型作为参数 总结 前言 当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载:这样的做得目的可以很好的提高用户体验. 为了实现这个功能,Vue3中为我们提供了一个方法,即defineAsyncComponent,这个方法可以传递两种类型的参数,分别是函数类型和对象类型,接下来我们分别学习. 传递工厂函数作为参数 defineAsyncComponent方法接收一个工厂函数是它的基本用法,这个工厂函数必须返回

  • 一文搞懂Python中列表List和元组Tuple的使用

    目录 列表 List 列表是有序的 列表可以包含任意对象 通过索引访问列表元素 列表嵌套 列表可变 元组 Tuple 定义和使用元组 元素对比列表的优点 元组分配.打包和解包 List 与 Tuple 的区别 列表 List 列表是任意对象的集合,在 Python 中通过逗号分隔的对象序列括在方括号 ( [] ) 中 people_list = ['曹操', '曹丕', '甄姫', '蔡文姫'] print(people_list) ['曹操', '曹丕', '甄姫', '蔡文姫'] peopl

  • 一文搞懂Spring中的注解与反射

    目录 前言 一.内置(常用)注解 1.1@Overrode 1.2@RequestMapping 1.3@RequestBody 1.4@GetMapping 1.5@PathVariable 1.6@RequestParam 1.7@ComponentScan 1.8@Component 1.9@Service 1.10@Repository 二.元注解 @Target @Retention @Documented @Inherited 三.自定义注解 四.反射机制概述 4.1动态语言与静态语

  • 一文搞懂SpringMVC中@InitBinder注解的使用

    目录 简介 应用示例 原理解读 环境:Springboot2.4.12 简介 ​@Controller或@ControllerAdvice类可以有@InitBinder方法来初始化WebDataBinder的实例,这些方法可以: 将请求参数(即表单或查询数据)绑定到模型对象. 将基于字符串的请求值(如请求参数.路径变量.头.cookie等)转换为控制器方法参数的目标类型. 渲染HTML表单时,将模型对象的值格式化为字符串值. @InitBinder方法可以注册控制器特定的java.bean.Pr

  • 一文搞懂JavaScript中的内存泄露

    目录 什么是内存泄漏 怎么检测内存泄漏 Performance Memory 内存泄漏的场景 垃圾回收算法 引用计数 循环引用 标记清除 闭包是内存泄漏吗 总结 以前我们说的内存泄漏,通常发生在后端,但是不代表前端就不会有内存泄漏.特别是当前端项目变得越来越复杂后,前端也逐渐称为内存泄漏的高发区.本文就带你认识一下Javascript的内存泄漏. 什么是内存泄漏 什么是内存?内存其实就是程序在运行时,系统为其分配的一块存储空间.每一块内存都有对应的生命周期: 内存分配:在声明变量.函数时,系统分

  • 一文搞懂Vue中computed和watch的区别

    目录 一.computed介绍 1.1.get 和 set 用法 1.2.计算属性缓存 二.watch介绍 三.两者区别 3.1.对于 computed 3.2.对于 watch 四.应用场景 一.computed介绍 computed 用来监控自己定义的变量,该变量在 data 内没有声明,直接在 computed 里面定义,页面上可直接使用. //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:fu

  • 一文搞懂ES6中的Map和Set

    Map Map对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值.构造函数Map可以接受一个数组作为参数. Map和Object的区别 •一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值. •Map中的键值是有序的(FIFO 原则),而添加到对象中的键则不是. •Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算. •Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突.

  • 一文搞懂Java中的反射机制

    前一段时间一直忙,所以没什么时间写博客,拖了这么久,也该更新更新了.最近看到各种知识付费的推出,感觉是好事,也是坏事,好事是对知识沉淀的认可与推动,坏事是感觉很多人忙于把自己的知识变现,相对的在沉淀上做的实际还不够,我对此暂时还没有什么想法,总觉得,慢慢来,会更快一点,自己掌握好节奏就好. 好了,言归正传. 反射机制是Java中的一个很强大的特性,可以在运行时获取类的信息,比如说类的父类,接口,全部方法名及参数,全部常量和变量,可以说类在反射面前已经衣不遮体了(咳咳,这是正规车).先举一个小栗子

  • 教你一文搞懂Kotlin中的Jvm注解

    JvmOverloads 创建一个kotlin的类 class Student(val name: String, val sex: Int = 1, val age: Int = 18) 可以看出来 这个构造函数的参数是有默认值的,kotlin的特性对吧,我们在使用的时候可以方便的使用,比如: val student = Student("wuyue") val student2 = Student("wuyue", age = 18) 但是这个特性如果你用jav

随机推荐