Vue 笔记(4)- 组件(自定义事件、使用插槽分发内容、动态组件)

原创 乘风逐月 随笔 Vue 141阅读 2018-04-26 10:30:06 举报

一、自定义事件

父组件通过 prop 给子组件传递数据,子组件则通过自定义事件和父组件通信

1.使用 v-on绑定自定义事件

每个Vue实例都实现了事件接口,即
a. 使用 $on(eventName) 监听事件
b. 使用 $emit(eventName, optionalPayload) 触发事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。不能使用$on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定。

2.使用载荷数据
3.给组件绑定原生事件

如果要在组件的根元素上监听一个原生事件,可以使用 v-on 的修饰符 .native 。
如下:只是监听子组件的点击事件。

4.使用自定义事件的表单输入组件

自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。

示例:

二、使用插槽分发内容

1.内容分发

为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板,这个过程称为内容分发。
Vue使用特殊的 slot 元素作为原始内容的插槽

2.编译作用域

父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。
例如:

3.单个插槽

除非子组件模板包含至少一个 solt 口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。

最初在 slot 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容
例如:

以上代码会显示为

如果子组件内没有 slot 插槽,父组件 my-component 里面的

将会被丢弃,不会显示。
如果父组件 my-component 里面没有任何内容,即没有 p 元素时,slot 里面的内容才会显示。

4.具名插槽

slot 元素可以用 name 特性配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃
例如:

将会渲染为:

这就是 具名插槽匹配父组件中具有对应 slot 特性的元素。
子组件 main 中的匿名插槽,作为没有 slot 特性元素的备用插槽。

如果子组件中没有那个匿名插槽,父组件的

会被抛弃不显示。

5.作用域插槽

作用域插槽是一种特殊类型的插槽,用作一个(能被传递数据的)可重用模板,来代替已经渲染好的元素。
在子组件中,只需将数据传递到插槽,就像将prop传递给组件一样。
例如:

在父组件中,具有特殊特性 slot-scope 的元素,表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象。如子组件的 slot 的 text 的值。
最终渲染为:

三、动态组件
通过使用保留的 component 元素,并对其 is 特性进行动态绑定,可以在同一个挂载点动态切换多个组件
例如:

在这里动态改变 currentView 就可以切换 component 里面的组件。

1.keep-alive

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,避免重新渲染
keep-alive 是一个抽象组件,它自身不会渲染一个DOM 元素,也不会出现在父组件链中。
当组件在 keep-alive 内切换时,它的 activated 和 deactivated 这两个生命周期函数将会被对应执行。

注: keep-alive 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部或全局注册。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复