前端框架vue.js系列（6）：组合组件和动态组件

组合组件

组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。换种说法，组件就是一个个小的可复用零件，通过这些复用零件的组合使用可以搭建起一个大型机械。

我们先来看一个组件的demo：

  

    
    
  


Vue.component('todo-item', {
  props: ['todo'],
  template: '
{{ todo.text }}
'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})

通过上面可知创建组件语句是Vue.component，其中props为接收父结构的入参，template为组件模板。这里要注意template模板既可以直接写文本，也可以通过引用外部模板id代入。如上例中的语句写法可以换成：

上例中我们创建了组件元素，只要在模块范围内加入，即可渲染出来，这类组件我们统称为组合组件。与组合组件不同的另一类组件，就是动态组件。

（贴士）如果使用vue脚手架，组件创建则无需使用Vue.component，通常会独立写成一个后缀名为.vue格式的文件，可参考后面章节vue脚手架。

 

动态组件

动态组件是指通过使用保留的 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。下面是一个动态组件的demo：

	

		
		切换动态组件
	

通过上面例子可以看出，动态组件没有用户自定义的元素，它渲染使用的是系统提供的元素。它使用v-bind:is=(vue实例中components下的组件，如本例中的dt1和dt2)绑定组件。动态组件可以实现自由在界面中切换组件的效果。

在实际开发中，我们更常用到的是组合组件，下一篇将介绍组合组件的各属性用法及参数传输的原理。