Vue组件间通信方式

一.Props传递数据在父组件中使用子组件,本质通过v-bind绑定属性传入子组件,子组件通过props接收父组件传入的属性<template><div>父组件:{{mny}}<Son1:mny="mny"></Son1></div></template><script>importSon1from"./Son1"...

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

<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: { // 接收到的属性名只能叫valuetype: 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

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

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文档,嗯,就酱啦~

源文地址:https://www.guoxiongfei.cn/cntech/26835.html
0