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

电玩女神 2021-09-14 06:24 333阅读 0赞

# 组合组件 #

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

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

<div id="app-7">
      <ol>
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id">
        </todo-item>
      </ol>
    </div>
    
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{
       { todo.text }}</li>'
    })
    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其他什么人吃的东西' }
        ]
      }
    })

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

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

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

# 动态组件 #

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

<body>
    	<div id="app">
    		<component v-bind:is="currentView"></component>
    		<button @click="changeComponent">切换动态组件</button>
    	</div>
    </body>
    
    
    <script type="text/x-template" id="dt1">
    	<div>这里是动态子组件1</div>
    </script>
    
    <script type="text/x-template" id="dt2">
    	<div>这里是动态子组件2</div>
    </script>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			currentView: 'dt1'
    		},
    		methods: {
    			changeComponent: function() {
    				if(this.currentView == "dt2") {
    					this.currentView = "dt1";
    				} else {
    					this.currentView = "dt2";
    				}
    			}
    		},
    		filters: {},
    		computed: {},
    		components: {
    			dt1: {
    				template: "#dt1"
    			},
    			dt2: {
    				template: "#dt2"
    			}
    		},
    		watch: {}
    	});
    </script>

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

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