自定义事件
我们知道,父组件是使用props传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!使用v-on绑定自定义事件每个Vue实例都实现了事件接口(Eventsinterface),即:
使用on(eventName)监听事件使用emit(eventName)触发事件
另外,父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
举个栗子:
如下:
给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on。例如:
使用自定义事件的表单输入组件
自定义事件也可以用来创建自定义的表单输入组件,使用v-model来进行数据双向绑定。牢记,表单控件进行数据绑定时的语法:
仅仅是一个语法糖:
所以在组件中使用时,它相当于下面的简写:
所以要让组件的v-model生效,它必须:
接受一个value属性在有新的value时触发input事件
举个栗子:
非父子组件通信
有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的Vue实例作为中央事件总线:
使用Slots分发内容
在使用组件时,常常要像这样组合它们:
注意两点:
app组件不知道它的挂载点会有什么内容。挂载点的内容是由app的父组件决定的。app组件很可能有它自己的模版。
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发(或“transclusion”如果你熟悉Angular)。Vue.js实现了一个内容分发API,参照了当前Web组件规范草案,使用特殊的slot元素作为原始内容的插槽。
编译作用域
在深入内容分发API之前,我们先明确内容的编译作用域。假定模板为:
message应该绑定到父组件的数据,还是绑定到子组件的数据?答案是父组件。组件作用域简单地说是:
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法:
假定someChildProperty是子组件的属性,上例不会如预期那样工作。父组件模板不应该知道子组件的状态。
如果要绑定子组件内的指令到一个组件的根节点,应当在它的模板内这么做:
类似地,分发内容是在父组件作用域内编译。
单个Slot
除非子组件模板包含至少一个slot插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的slot时,父组件整个内容片段将插入到slot所在的DOM位置,并替换掉slot标签本身。
最初在slot标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
假定my-