2.1 组件化开发

• 组件开发的基本流程

1. 创建组件构造器；
2. 注册组件
3. 使用组件

---

• 组件基本使用示例

创建组件构造器使用：Vue.extend({template:`<h1>www</h1>`})，Vue.extend()创建的是一个组件构造器，它传入对象。通常在创建组件构造器时，传入template代表我们自定义组件的模板。

注册组件使用Vue.component('组件标签名',对应的extend对象名称|extend对象)

<div id="app">
    <!-- 3.使用组件 -->
    <cpn1></cpn1>
</div>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 1.创建组件构造器
	const welcome=Vue.extend({
		template:`
			<div>
				<h1>我是组件</h1>
			</div>
		`
	})
	//2.注册组件
	Vue.component('cpn1',welcome)
	const app=new Vue({
		el:'#app',
		data:{
			txtValue:[]
	    }
	})
</script>

---

• 全局组件和局部组件

全局组件可以在多个Vue实例中使用。如上图代码所示，创建的即为全局组件。

怎么注册局部组件?  在某个Vue实例下注册就是局部组件。

const app=new Vue({
		el:'#app',
		data:{
			txtValue:[]
		},
		components:{
			//2.注册局部组件，此处对象的键名(组件标签名)加不加引号都可以正常运行
			cpn1:welcome
		}
	})

---

• 父组件和子组件

子组件构造器要写在父组件构造器前面，并在父组件构造器中注册子组件，使用子组件标签。子组件只能在父组件中使用

<div id="app">
	<cpn1></cpn1>
</div>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 1.子组件要定义在父组件前面，要不识别不到。
	const son=Vue.extend({
		template:`<h2>我是子组件</h2>`
	})
	const father=Vue.extend({
		template:`
			<div>
				<h1>我是组件</h1>
				<cpnSon></cpnSon>
			</div>
		`,
		components:{
			cpnSon:son
		}
	})

	const app=new Vue({
		el:'#app',
		components:{
			//2.注册局部组件，此处对象的键名(组件标签名)加不加引号都可以正常运行
			cpn1:father
		}
	})
</script>

---

• 注册组件的语法糖写法

语法糖省去了写Vue.extend()构造器的步骤，只是Vue.component()中不写extend对象名称，而是直接写成extend对象。如： Vue.component('组件标签名',extend对象)

<div id="app">
	<!-- <cpn1></cpn1> -->
	<cpnSon></cpnSon>
</div>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const father=Vue.extend({
		template:`
			<div>
				<h1>我是组件</h1>
				<cpnSon></cpnSon>
			</div>
		`,
		components:{
			// 注册组件的语法糖写法，本示例注册的为子组件
			cpnSon:{
				template:`<h2>我是子组件</h2>`
			}
		}
	})
	const app=new Vue({
		el:'#app',
		components:{
			//注册的为局部组件，此处对象的键名(组件标签名)加不加引号都可以正常运行
			cpn1:father
		}
	})
</script>

---

• 模板的分离写法

方法1：script标签type类型为text/x-template,加标签id属性。注册组件的地方用引号写上分离模板的#id。模板只能有1个根元素，不能有多个根元素。

<div id="app">
	<cpn></cpn>
</div>
<script type="text/x-template" id="temp1">
	<div>
		<h2>分离模板的文字内容</h2>
	</div>
</script>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 此处组件标签的名字必须加上引号,如果昌键值对的形式不用加引号
	Vue.component('cpn',{
		template:'#temp1'
	})
	const app=new Vue({
		el:'#app'
	})
</script>

方法2：使用template加id，代替script标签。

<div id="app">
	<cpn></cpn>
</div>
<template id="temp1">
	<div>
		<h2>分离模板的文字内容</h2>
	</div>
</template>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 此处组件标签的名字必须加上引号,如果昌键值对的形式不用加引号
	Vue.component('cpn',{
		template:'#temp1'
	})
	const app=new Vue({
		el:'#app'
	})
</script>

---

• 为什么组件data必须是函数

组件内部不能访问Vue实例中的数据。data函数中需要返回1个对象。主要是组件的复用。每次调用函数，函数内的变量都是新建，所以每个组件实例中的data数据可以做到互不影响。 

组件内部也有一个data属性（也可以有metheds属性）。只是这个data属性必须是一个函数，而且这个函数返回一个对象。对象内保存着数据。

<div id="app">
	<wd></wd>
	<wd></wd>
</div>
<template id="hao">
	<div>
		<h2>wang{{result}}</h2>
		<button @click="add">+</button>
		<button @click="sub">-</button>
	</div>
			
</template>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	Vue.component('wd',{
		template:'#hao',
		data(){
			return {
				result:0
			}
		},
		methods:{
			add(){
				this.result++
			},
			sub(){
				this.result--
			}
		}
	})
	const app=new Vue({
		el:'#app'
	})
</script>