当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue组件间通信方式

Vue组件间通信方式

2019年09月11日  | 移动技术网IT编程  | 我要评论

一.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

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

v-model

<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

继续将属性传递

<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：批量向下传入属性

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

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


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

$listeners：批量向下传入方法

<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

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

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的所有通信方法总结，没有写的特别详细，详细的用法可见vue文档，嗯，就酱啦~

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网