【关于Vue的常用语法③--创建组件、组件传值、生命周期】

一、创建组件

创建组件的方式：
1、全局创建 利用“Vue.extend”创建全局的vue组件，语法为’Vue.component(‘组件名’,创建出来的组件模板对象)；
2、局部创建 利用template元素，定义组件的HTML模板结构。

第一个 全局创建：
在vue生效的区间内都可以任意使用 但有点消耗资源，组件内部都可以封装对应功能，组件 相当于新增的标签 直接在#app里用就行了
如下代码：

		<template id="zsj">
			<div>
				<h1>全局组件中的：hello world</h1>
				<p>{{title}}</p>
				<button @click="change()">title修改</button>
			</div>
		</template>
		<div id="app">
			<zsj></zsj>
		</div>
		<script type="text/javascript">
			Vue.component("zsj",{ //第一个参数：组件名称
				template:"#zsj",//组件的结构模板 和dom做绑定
				//组件内部data是一个函数，创建的数据写到函数的返回值中
				data:function(){
					return{
						title:"我是全局组件中的title"
					}
				},
				methods:{
					change(){
						this.title="改变的结果"
						console.log("触发了")
					}
				}
			})
			let vn=new Vue({   //这是一个最大的组件 也叫实例
				el:"#app",
			})
		</script>

第二个 局部创建：
局部注册组件，只在注册的位置生效 其他的地方拿不到，

        <template id="zsj">
			<div>
				<h1>全局组件中的：hello world</h1>
			</div>
		</template>
		<template id="goods">
			<div>
				我是goods里的局部组件
			</div>
		</template>
		<div id="app">
			<zsj></zsj>
			<goods></goods>
		</div>
		<script type="text/javascript">
			Vue.component("zsj",{ //第一个参数：组件名称
				template:"#zsj",//组件的结构模板 和dom做绑定
				//组件内部data是一个函数，创建的数据写到函数的返回值中
				data:function(){
					return{
						title:"我是全局组件中的title"
					}
				}
			})
			let vn=new Vue({   //这是一个最大的组件 也叫实例
				el:"#app",
				components:{   //这是注册的局部组件
					goods:{    //组件名称
						template:"#goods"
					}
				}
			})
			
		</script>

也就是局部在全局里无法用 只能在实例中用

二、父子组件的传值

我们都知道 ajax请求 是将所有数据拿到页面中 通常由大的组件发送 所以需要由父组件发送数据子组件接收。

        <template id="todo">
			<div>
				<p>菜品为：{{goodsname}}</p>
				<!-- 删除 给个子组件一个点击事件 点击就触发绑定的监听事件 -->
				<button v-on:click="remove()">删除</button>
			</div>
		</template>
		<div id="app">
			<!-- 父组件要监听对应的事件 -->
			<todo v-for="(item,index) in goodsList" :goodsname="item" @remove="fun(index)"></todo>
			<!-- 子组件写了一个响应事件 就给todo标签写一个监听@remove 然后如果响应了就触发 fun()方法这个方法是父组件的所以写在父组件里面 -->
		</div>
		
		<script type="text/javascript">
			//将父组件里的item数据传给 todo组件  也就是父传子 用数据绑定的方式接收数据
			//第一步先在 子组件中创建一个props选项 表明要接收父级发送过来的数据
			let vn=new Vue({   //最大实例 也可以叫最大组件
				el:"#app",
				data:{
					goodsList:["汉堡","披萨","薯条","炸鸡","可乐","牛奶"]
				},
				methods:{
					fun(index){   //fun里面传个循环的index值 
						this.goodsList.splice(index,1)
					}
				},
				components:{  //局部组件
					todo:{
						props:["goodsname"],//可以接收由父级传过来的goodsname数据
						template:"#todo",
						data:function(){
							return{
								
							}
						},
						methods:{
							remove(){   //局部组件中的删除
								this.$emit("remove")
							}
						}
					}
				}
			})
		</script>

点击子组件中的删除时，将对应的数据删除掉。点击子组件中的按钮，操作父组件中的数据 子传父，可以使用事件响应的方式 删除父组件中的数据 就用父组件的方法。
第一步先创建一个实例在里面加入数据goodsList，然后在里面创建一个局部组件todo 然后再子组件创建一个props选项 表明接收父级发送过来的数据也就是实例里面的，然后在标签todo 里数据绑定 :goodsname=“item” ，todo也要先写个循环 显示数据。这样显示的就是这样：
可以先忽略button标签

上面呢我们给子组件写一个button标签 给个点击事件 ，然后给子组件也就是局部组件写一个事件响应remove() 删除，响应这个事件后，自定义一个事件名称 this.$emit(“remove”)，然后再给todo标签添加一个监听 监听子组件里的响应 @remove 然后如果响应了就触发父组件里的 fun()方法，然后就是在父组件里面写一个删除的方法就完成了。

---

三、父子传值之第二版

这个版本用的好像不多，不过也要知道。
就大概意思自己看代码理解吧，挺好理解的。

		<template id="zzb">
			<div>
				{{mes}}
				<p>{{name}}</p>
				<button @click="change()">改变父级mes 改成hello world</button>
			</div>
		</template>
		<div id="app">
			<zzb :mes="mes" ref="one"></zzb>
			<button @click="changeName()">改变子组件中name</button>
		</div>
		<script type="text/javascript">
			let vn=new Vue({
				el:'#app',
				data:{
					mes:"title"
				},
				methods:{
					changeName(){
						//找到对应子组件
						//$refs找到所有的子集元素
						console.log(this.$refs.one)
						this.$refs.one.name="哈哈"
					}
				},
				components:{  //创建个子组件 局部
					zzb:{
						props:["mes"],
						data:function(){
							return{
								name:"我是子组件数据"
							}
						},
						template:'#zzb',
						methods:{
							change(){
								//可以使用dom操作找到对应的父组件
								//$parent 找到对应父组件(实例)
								console.log(this.$parent)
								//子组件 修改父组件中的内容
								this.$parent.mes="hello world"
							}
						}
					}
				}
			})
		</script>

然后这是实现的结果：点击就可以实现了。

---

结束。
噢 还没！ 还有个比较重要的 “生命周期”

四、关于Vue的生命周期

Vue 把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想现实的动作。学习实例的生命周期，能帮助我们理解vue实例的运作机制，更好地合理利用各个钩子来完成我们的业务。
1.beforeCreate： 刚开始创建vue实例 没有挂载dom和产生data
2.created:Vue： 已经实例化完成 ，并且拥有了自己data，但是没有挂载dom
3.beforeMount： 准备挂载dom
4.mounted： 挂载成功
5.beforeUpdate： 数据更新前
6.updated： 数据更新后
7.beforeDestroy ： 调用实例的destroy( ) 方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。
8.destroyed： 成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。

---

结束！