本文为转载，原文：Vue学习笔记入门篇——组件杂项
动态组件
通过使用保留的 <'component'> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换：
<div id="app">
<component :is="currentView"></component>
</div>
var home = {
template:'<p>this is home</p>'
}
var posts = {
template:'<p>this is posts</p>'
}
var archive = {
template:'<p>this is archive</p>'
}
var app = new Vue({
el:'#app',
data:{
currentView:'home'
},
components:{
home:home,
posts:posts,
archive:archive
}
})
运行结果：
在控制台中修改app.currentView的值，界面会动态发生改变。
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：
<keep-alive>
<component :is="currentView">
<!-- 非活动组件将被缓存！ -->
</component>
</keep-alive>
编写可复用组件
在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
Vue 组件的 API 来自三部分 - props, events 和 slots ：
Props 允许外部环境传递数据给组件
Events 允许从外部环境在组件内触发副作用
Slots 允许外部环境将额外的内容组合在组件中
子组件索引
尽管有 props 和 events，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID。例如：
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
当 ref 和 v-for 一起使用时，ref 是一个数组，包含相应的子组件。
$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs。
组件命名约定
当注册组件 (或者 props) 时，可以使用 kebab-case，camelCase，或 PascalCase。
在 HTML 模版中，请使用 kebab-case 形式。
当使用字符串模式时，可以不受 HTML 的 case-insensitive 限制。
components: {
'kebab-cased-component': { /* ... */ },
camelCasedComponent: { /* ... */ },
PascalCasedComponent: { /* ... */ }
}
如果组件未经 slot 元素传递内容，你甚至可以在组件名后使用 / 使其自闭合.
<my-component/>
当然，这只在字符串模版中有效。因为自闭的自定义元素是无效的 HTML，浏览器原生的解析器也无法识别它。
递归组件
组件在它的模板内可以递归地调用自己，不过，只有当它有 name 选项时才可以：
name: 'unique-name-of-my-component'
当你利用Vue.component全局注册了一个组件, 全局的ID作为组件的 name 选项，被自动设置.
Vue.component('unique-name-of-my-component', {
// ...
})
如果你不谨慎, 递归组件可能导致死循环:
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'
上面组件会导致一个错误“max stack size exceeded”，所以要确保递归调用有终止条件 (比如递归调用时使用 v-if 并让他最终返回 false )。
内联模板
如果子组件有 inline-template 特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。这让模板更灵活。
<div id="app">
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
</div>
Vue.component('my-component',{
})
new Vue({
el:'#app'
})
运行结果：
但是 inline-template 让模板的作用域难以理解。最佳实践是使用 template 选项在组件内定义模板或者在 .vue 文件中使用 template 元素。
x-Templates
另一种定义模版的方式是在 JavaScript 标签里使用 text/x-template 类型，并且指定一个 id。例如：
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
这在有很多模版或者小的应用中有用，否则应该避免使用，因为它将模版和组件的其他定义隔离了。
对低开销的静态组件使用 v-once
尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：
Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
... a lot of static content ...\
</div>\
'
})
其他
还有一些异步组件，和递归组件暂时先不介绍，等以后学习到webpack时在说这个问题。
完
本文为原创，转载请注明出处。
上一节：Vue学习笔记入门篇——组件的内容分发(slot)
返回目录
下一节：Vue学习笔记进阶篇——单元素过度
