Vue躬行记(6)——内容分发
Vue提供了一种内容分发技术,可将父组件中的内容传递给子组件的模板,实现方式参照了Web组件规范草案。 一、插槽 Vue内置了一个<slot>元素,能作为插槽(slot)存在,而插槽内可包含文本、HTML片段、组件等。以下面的btn组件为例,其模板中包含一个<slot>元素,在DOM中为btn组件添加了文本内容。 <btn>提交</btn> <script> Vue.component("btn", { template: '<button><slot></slot></button>' }); </script> 渲染出的<button>元素会包含“提交”,即插槽被替换成了分发的内容,如下所示。 <button>提交</button> 在插槽中允许添加默认的内容(即为<slot>元素附加内容,如下所示),当父组件没有传递内容时,它们就会被渲染。 Vue.component("btn", { template: '<button><slot>提交</slot></button>' }); 二、具名插槽 具名插槽是指包含名称的插槽,即指定了name特性的<slot>元素。当组件的模板中需要多个插槽时,就得通过名称来加以区分。例如有一个page组件,包含三个<slot>元素,其中有两个声明了name特性,如下所示。 Vue.component("page", {