vue.js $on $emit 的使用

vm.$on(event, callback)

监听当前实例上的自定义事件，事件可以由$emit触发，回调函数会接收所有传入事件触发函数的额外参数

vm$emit(event, [...args])

触发当前实例上的事件，附加参数都会传给监听器回调

 代码

父组件

子组件1

子组件2

代码。。拆分 理解

// 调用或者传递值给不同的组件 每个组件在不同的页面
// 只能在同一个对象上绑定 $on 和 $emit 才会起作用
// 只要在它们共同的页面 把同一个对象分别传给不同的页面
父组件: {
    template: { // 父组件 通过v-bind 把同一个event对象 传给子组件
         
         
	},
	data: {
         children1: {}, children2: {}
	},
	event = new Vue(),
	created() { // ∵使用$on 或 $emit 必须使用同一vue对象
         this.children1.event = event
         this.children2.event = event
	}
}
子组件1: {
	template: ,
	props: children1,
	data: {
         text: '', // input输入框的内容
         Event: this.children1.event
	},
	change() { // 子组件1 通过change()触发$emit 将参数传给子组件2
         this.Event.$emit('input', this.text)
	}
}
子组件2: {
	template: {{ text }}, // 展示 子组件1 输入的内容
	props: children2,
	data: {
         text: '',
         Event: this.children2.event
	},
	mounted() { // data 来自 组件1 的$emit('input', this.text)
         this.Event.$on('input', function(data) { th.text = data } )
	} // 子组件1 input输入框的按键离开keyup 调用函数change() 通过 $emit('input') 把值传给组件2
}	  // 子组件2 通过绑定$on('input') 监听组件1的值的变化

// 没有在页面销毁时及时注销实例 会导致一个对象多次监听 并且造成程序执行顺序的异常
// 多次监听执行 必须使用 
destroyed() { // 在页面销毁的时候 销毁绑定的监听实例
	xxx.$off()
}

 

props 父向子

$ref 父向子 通过ref 获取子组件数据 调用子组件方法

(ref作用在组件上 指向组件的实例 实例上的方法都可以调用)

$children 父向子 获取子组件数据 调用子组件方法

$emit 子向父 子组件通过$emit向父组件派发事件 父组件调用 获取子组件参数

$parent 子向父 如果存在多级子组件 访问最近一级的父组件

$root 子向父 如果存在多级子组件 访问根父组件(App.vue) (存在组件嵌套的情况 不使用$root)