php网站开发视频教程,做网站用到哪些软件,怎么做素材网站,wordpress导出这里写目录标题 Vue组件的几种通信#xff08;数据传递#xff09;方式非父子组件间通信#xff08;Bus事件总线#xff09;介绍实例 非父子通信-provideinject1.作用2.场景3.语法4.注意 父子组件间的通信固定props属性名#xff08;v-model#xff09;介绍实例 不固… 这里写目录标题 Vue组件的几种通信数据传递方式非父子组件间通信Bus事件总线介绍实例 非父子通信-provideinject1.作用2.场景3.语法4.注意 父子组件间的通信固定props属性名v-model介绍实例 不固定属性名.sync)介绍实例 Vue组件的几种通信数据传递方式
非父子组件间通信Bus事件总线
介绍
编写一个js文件来作为 中介 接收消息的一方通过监听 o n ( ) 方法进行接收消息的发送方通过 on()方法进行接收消息的发送方通过 on()方法进行接收消息的发送方通过emit向总线发送消息依次来达到通信的目的发布订阅模式消息的接收方可以有多个。
实例 创建一个都能访问的事件总线 空Vue实例 import Vue from vue
const Bus new Vue()
export default BusA组件接受方监听Bus的 $on事件 import Bus from ../utils/EventBuscreated () {Bus.$on(sendMsg, (msg) {this.msg msg})
}B组件发送方触发Bus的$emit事件 import Bus from ../utils/EventBusBus.$emit(sendMsg, 这是一个消息)非父子通信-provideinject
1.作用
跨层级共享数据
2.场景 3.语法
父组件 provide提供数据
export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}2.子/孙组件 inject获取数据
export default {inject: [color,userInfo],created () {console.log(this.color, this.userInfo)}
}4.注意
provide提供的简单类型的数据不是响应式的复杂类型数据是响应式。推荐提供复杂类型数据子/孙组件通过inject获取的数据不能在自身组件内修改
父子组件间的通信
固定props属性名v-model
介绍
利用v-model的原理进行父子组件间的通信v-model可以进行拆分①value ② input 事件 要求在子组件中props属性中的属性名必须为 value $emit中的事件名必须为input
实例
子组件
select :valuevalue changehandleChange.../select
props: {value: String
},
methods: {handleChange (e) {this.$emit(input, e.target.value)}
}父组件
BaseSelect v-modelselectId/BaseSelect不固定属性名.sync)
介绍
主要是为了对v-model中的情况做一些补充表单数据在传输时可以使用value这些比较合适但是有些不合适例如下拉列表等好处是不用固定value属性名 可以进行自定义 在父组件中的属性后面加.sync 在子组件中的$emit中事件名使用 update:属性名
实例
父组件
//.sync写法
BaseDialog :visible.syncisShow /
--------------------------------------
//完整写法
BaseDialog :visibleisShow update:visibleisShow $event
/子组件
props: {visible: Boolean
},this.$emit(update:visible, false)
