Vue组件化之构造组件

在构建项目中尽可能的将页面分成一个个小的、可复用的组件。

使用步骤

一、构造全局组件(但必须在实例挂载的元素中使用)

• 创建组件构造器 Vue.extend()，里面传递的参数是包含组件选项的对象

  • const cpnC = Vue.extend({
            
            
    	template:``,
    	components:{
            
            } //括号里为子组件
    })
    

• 注册组件 Vue.component(cpn,cpnC) 给构造器中的模板命名为cpn（即标签的名字）

• 使用组件

二、语法糖注册全局组件

即将一二步合并：

Vue.component('cpn',{
    
       //内部会帮你用extend
    template:``,
    props:[]/{
    
    },
    components:{
    
    }
})

三、模板的分离写法

<script type="text/x-template" id="cpn">
	<div></div>
</script>
<script>
    Vue.component('cpn',{
     
     
		template:'#cpn'
    })
</script>

<template id="cpn">
	<div></div>
</template>
<script>
	Vue.component('cpn',{
     
     
		template:'#cpn'
    })
</script>