1、vm.$listeners是组件的内置属性，它的值是父组件(不含 .native 修饰器的) v-on 事件监听器。
2、组件可以通过在自己的子组件上使用v-on=”$listeners”，进一步把值传给自己的子组件。如果子组件已经绑定$listener中同名的监听器，则两个监听器函数会以冒泡的方式先后执行。
//parent.vue <template> <div> <child @update="onParentUpdate"></child> </div> </template> <script> export default { name: 'parent', components:{ Child }, methods:{ onParentUpdate(){ console.log('parent.vue:onParentUpdate') } } } </script> //child.vue <template> <div> <grand-child @update="onChildUpdate" v-on="$listeners"></grand-child> </div> </template> <script> export default { name: 'child', components:{ GrandChild }, methods:{ onChildUpdate(){ console.log('child.vue:onChildUpdate') } } } </script> //grandchild.vue <script> export default { name: 'grandchild', mounted(){ //控制台输出: //grandchild:$listeners: {update: ƒ} console.log('grandchild:$listeners:',this.$listeners); //控制台输出: //child.vue:onChildUpdate //parent.vue:onParentUpdate this.$listeners.update(); } } </script>
三、组件选项 provide/inject
2.2.0 新增
如果列举Vue组件之间的通信方法，一般都会说通过prop，自定义事件，事件总线，还有Vuex。provide/inject提供了另一种方法。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
如果你熟悉 React，这与 React 的上下文特性(context)很相似。
不过需要注意的是，在文档中并不建议直接用于应用程序中。
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
//parent.vue <template> <div> <child></child> </div> </template> <script> export default { name: 'parent', provide: { data: 'I am parent.vue' }, components:{ Child } } </script> //child.vue <template> <div> <grand-child></grand-child> </div> </template> <script> export default { name: 'child', components:{ GrandChild } } </script> //grandchild.vue <script> export default { name: 'grandchild', inject: ['data'], mounted(){ //控制台输出: //grandchild:inject: I am parent.vue console.log('grandchild:inject:',this.data); } } </script>
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject 选项应该是一个字符串数组或一个对象，该对象的 key 代表了本地绑定的名称，value 就为provide中要取值的key。
在2.5.0+时对于inject选项为对象时，还可以指定from来表示源属性，default指定默认值(如果是非原始值要使用一个工厂方法)。
const Child = { inject: { foo: { from: 'bar', default: 'foo' //default: () => [1, 2, 3] } } }
四、作用域插槽 slot-scope
2.1.0 新增
在 2.5.0+，slot-scope 不再限制在 template 元素上使用，而可以用在插槽内的任何元素或组件上。
作用域插槽的文档说明很详细。下面举个例子来展示下应用场景。
可以看出列表页和编辑页对于数据的展示是一样的，唯一的区别是在不同页面对于数据有不同的处理逻辑。相同的数据展示这块就可抽取成一个组件，不同的地方则可以借助作用域插槽实现。