Vue.component('child-component', { // 有效，因为是在正确的作用域内 template: '<div v-show="someChildProperty">Child</div>', data: function () { return { someChildProperty: true } } })
类似地，分发内容是在父组件作用域内编译。
单个slot
父组件的内容将被抛弃，除非子组件模板包含<slot>，如果子组件模板只有一个没有特性的slot，父组件的整个内容将插到slot所在的地方并替换它。
<slot> 标签的内容视为回退内容。回退内容在子组件的作用域内编译，当宿主元素为空并且没有内容供插入时显示这个回退内容。
假定 my-component 组件有下面模板：
<div> <h1>This is my component!</h1> <slot>
如果没有分发内容则显示我。
</slot> </div>
父组件模板：
<my-component> <p>This is some original content</p> <p>This is some more original content</p> </my-component>
渲染结果：
<div> <h1>This is my component!</h1> <p>This is some original content</p> <p>This is some more original content</p> </div>
具名slot
<slot>元素可以用一个特殊特性name配置如何分发内容，多个slot可以有不同的名字，具名slot将匹配内容片段中有对应slot特性的元素。
仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的回退插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。
动态组件
多个组件可以使用同一个挂载点，然后动态地在它们之间切换，使用保留的<component>元素，动态地绑定到它的is特性：
new Vue({ el: 'body', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) <component :is="currentView"> <!-- 组件在 vm.currentview 变化时改变 --> </component>
keep-alive
把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。
<component :is="currentView" keep-alive>
<!-- 非活动组件将被缓存 -->
</component>
activate钩子
控制组件切换时长，activate 钩子只作用于动态组件切换或静态组件初始化渲染的过程中，不作用于使用实例方法手工插入的过程中。
Vue.component('activate-example', { activate: function (done) { var self = this loadDataAsync(function (data) { self.someData = data done() }) } })
transition-mode
transition-mode 特性用于指定两个动态组件之间如何过渡。
在默认情况下，进入与离开平滑地过渡。这个特性可以指定另外两种模式：
in-out：新组件先过渡进入，等它的过渡完成之后当前组件过渡出去。
out-in：当前组件先过渡出去，等它的过渡完成之后新组件过渡进入。
示例：
<!-- 先淡出再淡入 --> <component :is="view" transition="fade" transition-mode="out-in"> </component> .fade-transition { transition: opacity .3s ease; } .fade-enter, .fade-leave { opacity: 0; }
Vue.js 组件 API 来自三部分——prop，事件和 slot：
prop 允许外部环境传递数据给组件；
事件 允许组件触发外部环境的 action；
slot 允许外部环境插入内容到组件的视图结构内。
以上所述是小编给大家介绍的Vue.js组件使用开发实例教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: