专栏首页web前端技术分享Vue组件间通信方式

Vue组件间通信方式

一.Props传递数据

  当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。在父组件中使用子组件,本质通过v-bind绑定属性传入子组件,子组件通过props接收父组件传入的属性。

<template>
 <div>
  父组件:{{mny}}
  <Son1 :mny="mny"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

二.$emit使用

  触发当前实例上的事件。附加参数都会传给监听器回调。子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件,父组件通过v-on接收子组件传入的方法,并接收子组件传入的参数。

<template>
 <div>
  父组件:{{mny}}
  <Son1 :mny="mny" @input="change"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 methods: {
  change(mny) {
   this.mny = mny;
  }
 },
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

子组件触发绑定自己身上的方法

<template>
 <div>
  子组件1: {{mny}}
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  mny: {
   type: Number
  }
 }
};
</script>

同步父子组件的数据,->子组件上使用的语法糖的写法 (.sync和v-model写法),v-model和.sync的区别在于v-model触发的事件只能是input,而.sync可以自定义事件名

.sync

  对一个 prop 进行“双向绑定”, 推荐以 update:myPropName 的模式触发事件取而代之,然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。

<Son1 :mny.sync="mny"></Son1>
<!-- 触发的事件名 update:(绑定.sync属性的名字) -->
<button @click="$emit('update:mny',200)">更改</button>

v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件.

<Son1 v-model="mny"></Son1>
<template>
 <div>
  子组件1: {{value}} // 触发的事件只能是input
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  value: { // 接收到的属性名只能叫value
   type: Number
  }
 }
};
</script>

三.$parent、$children

  $parent: 指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。

  $children: 当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。

<Grandson1 :value="value"></Grandson1>
<template>
 <div>
  孙子:{{value}}
  <!-- 调用父组件的input事件 -->
  <button @click="$parent.$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  value: {
   type: Number
  }
 }
};
</script>

四.$attrs、$listeners

$attrs:批量向下传入属性

  包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (classstyle 除外)。

<Son2 name="小明" age="10"></Son2>

<!-- 可以在son2组件中使用$attrs属性,可以将属性继续向下传递 -->
<div>
  儿子2: {{$attrs.name}}
  <Grandson2 v-bind="$attrs"></Grandson2>
</div>


<template>
 <div>孙子:{{$attrs}}</div>
</template>

$listeners:批量向下传入方法

  包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

<Son2 name="小珠峰" age="10" @click="()=>{this.mny = 500}"></Son2>
<!-- 可以在son2组件中使用listeners属性,可以将方法继续向下传递 -->
<Grandson2 v-bind="$attrs" v-on="$listeners"></Grandson2>

<button @click="$listeners.click()">更改</button>

五.Provide & Inject

依赖注入原理,provideinject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

Provide:在父级中注入依赖数据

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

provide() {
  return { parentMsg: "父亲" };
},

Inject:在任意子组件中可以注入父级数据

inject: ["parentMsg"] // 会将数据挂载在当前实例上

六.Ref使用

  一个对象,持有注册过 ref 特性的所有 DOM 元素和组件实例。可以在父组件中获取子组件的属性和方法。

<Grandson2 v-bind="$attrs" v-on="$listeners" ref="grand2"></Grandson2>
mounted() { // 获取组件定义的属性
  console.log(this.$refs.grand2.name);
}

七.EventBus

用于跨组件通知(不复杂的项目可以使用这种方式)

Vue.prototype.$bus = new Vue();

在vue原型对象上添加一个公共发放,暴露vue示例,供组件接收方法

mounted() {
   this.$bus.$emit("my", "我是Grandson1");
 },

兄弟间组件接收方法

mounted() {
  this.$bus.$on("my", data => {
   console.log(data);
  });
 },

八.Vuex通信

全局统一状态管理,用于大型项目组件间通信,管理数据状态。

vue所有通信方式总结,嗯,就酱啦~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用element-ui中table expand展开行控制显示隐藏(手风琴效果)

    问题讲解: 在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一...

    TimothyJia
  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:

    TimothyJia
  • 图解公钥与私钥

    在学习ssh时,一定有不少人对公钥和私钥产生过不解。在搜索公钥跟私钥的理解时,发现了这篇有趣的图解小文章,与大家共享。

    TimothyJia
  • 以开发者为中心的小程序生态

    小程序现有的开发模式是基于已有的小程序基础库提供的组件,通过自定义业务的样式实现自定义化和功能。

    villainhr
  • Python进阶之Matplotlib入门(一)

    Matplotlib是Python的画图领域使用最广泛的绘图库,它能让使用者很轻松地将数据图形化以及利用它可以画出许多高质量的图像,是用Python画图的必备技...

    HuangWeiAI
  • 如何在浏览器上跑深度学习模型?并且一行JS代码都不用写

    翻译 | 林椿眄 编辑 | 周翔 2017 年 8 月,华盛顿大学的陈天奇团队发布了 TVM,和 NNVM 一起组成深度学习到各种硬件的完整优化工具链,支持手机...

    AI科技大本营
  • 这 21 个 VSCode 快捷键,能让你的代码飞起来

    请将 Ctrl 对应要换成 Command,而 Alt 对应换成 Option 再试一下。

    杰哥的IT之旅
  • 浙江工业大学校赛 画图游戏 BugZhu抽抽抽!!

    BugZhu抽抽抽!! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768...

    ShenduCC
  • AngularDart注意事项 顶

    2.执行pub global activate stagehand或pub cache repair命令

    南郭先生
  • [译]PEP 380--子生成器的语法

    导语: PEP(Python增强提案)几乎是 Python 社区中最重要的文档,它们提供了公告信息、指导流程、新功能的设计及使用说明等内容。对于学习者来说,PE...

    Python猫

扫码关注云+社区

领取腾讯云代金券