vue组件基础拓展

上篇文章中讲述了组件注册的两种方式，本人比较喜欢第二种方式。在此基础上对组件的使用进一步说明

1.template  

        一个字符串模板作为Vue实例的标识使用。模板将会替换挂在的元素。挂载元素的内容都将被忽略，除非模板的内容有分发slot。

   如果值以#开始，则它用作选项符，将使用匹配元素的innerHTML作为模板,常用的技巧是用<script type="x-template">包含模板。

(1)组件模板1

<div id="box">
	<my-aaa></my-aaa>  
</div>
<script type="x-template" id="aaa">
	<h2 @click="change">标题2->{{msg}</h2>
	<ul>
	     <li v-for="val in arr">{{val}}</li>
	</ul>
</script>


var vm=new Vue({   //vue实例
	el:'#box',  //选择器
	components:{ //局部组件
	  'my-aaa':{
		data(){  //组件数据
			return {
			   msg:'welcome vue',
			   arr:[111,222,333,444]
			}
		},
		methods:{
			change(){
			   this.msg='changed';
			}
		},
		template:'#aaa'   //组件模板
	   }
       }
});
以上方式是把组件单独放在一个位置，<script type="x-template">，还可以放在模板<template></template>里面

(2)组件模板2
<div id="box">
	<my-aaa></my-aaa>
</div>
<template id="aaa">
	<h1>标题1</h1>
	<ul>
	    <li v-for="val in arr">
		{{val}}
	    </li>
	</ul>
</template>
var vm=new Vue({
	el:'#box',
	components:{
	  'my-aaa':{
		data(){
		      return {
		          msg:'welcome vue',
			   arr:['apple','banana','orange']
			}
		},
		methods:{
			change(){
			   this.msg='changed';
			}
		},
		template:'#aaa'   //对应temolate的id
	  }
	}
});
2.动态获取组件

 
   在做项目中动态获取组件的必须的，动态获取组件的方式如下,类似选项卡的功能

<div id="box">
	<input type="button" @click="a='aaa'" value="aaa组件">
	<input type="button" @click="a='bbb'" value="bbb组件">
	<component :is="a"></component>
</div>
var vm=new Vue({
	el:'#box',
	data:{
		a:'aaa'    //数据a
	},
	components:{
		'aaa':{    //组件aaa
			template:'<h2>我是aaa组件</h2>'
		},
		'bbb':{  组件bbb
			template:'<h2>我是bbb组件</h2>'
		}
	}
});
3.父组件与子组件

<div id="box">
	<aaa>
	</aaa>
</div>
var vm=new Vue({
	el:'#box',     //选择器
	data:{
		a:'aaa'     //数据
	},
	components:{
		'aaa':{      //组件 aaa
			template:'<h2>我是aaa组件</h2><bbb></bbb>',//子组件放在父组件块里使用
			components:{    //组件嵌套组件构成父与子的关系
				'bbb':{     //子组件bbb
					template:'<h3>我是bbb组件</h3>'
				}
			}
		}
	}
});
当存在父子关系时，子组件是否可以继承父组件里的信息，如果可以继承，那怎样继承呢？

(1)子组件获取父组件的数据
var vm=new Vue({
	el:'#box',
	data:{
		a:'aaa'
	},
	components:{
		'aaa':{
			data(){
				return {
					msg:'我是父组件的数据'
				}
			},
			template:'<h2>我是aaa组件->{{msg}}</h2><bbb></bbb>',
			components:{
				'bbb':{
					template:'<h3>我是bbb组件->{{msg}}</h3>'   //vue在默认情况下，子组件无法访问到父组件里的数据
				}
			}
		}
	}
});
上面的方式是获取不到父组件msg的数据的，因为vue在默认情况下，子组件无法访问到父组件里的数据

要想获取父组件里的数据可以采用下面的方式
<div id="box">
	<aaa>
	</aaa>
</div>
<template id="aaa">
	<h1>11111</h1>
	<bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
var vm=new Vue({
		el:'#box',
		data:{
			a:'aaa'
		},
		components:{
			'aaa':{
				data(){
					return {
						msg:111,
						msg2:'我是父组件的数据'
					}
				},
				template:'#aaa',
				components:{
					'bbb':{
						props:['mmm','myMsg'],//命名要用驼峰式命名法
						template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'
					}
				}
			}
		}
});
(2)父组件获取子组件的数据

<div id="box">
	<aaa>
	</aaa>
</div>
<template id="aaa">
	<span>我是父级 -> {{msg}}</span>
	<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
	<h3>子组件-</h3>
	<input type="button" value="send" @click="send">
</template>
var vm=new Vue({
	el:'#box',
	data:{
		a:'aaa'
	},
	components:{
	'aaa':{
		data(){
			return {
				msg:111,
				msg2:'我是父组件的数据'
			}
		},
		template:'#aaa',
		methods:{
			get(msg){
				// alert(msg);
				this.msg=msg;
			}
		},
		components:{
			'bbb':{
				data(){
					return {
						a:'我是子组件的数据'
					}
				},
				template:'#bbb',
				methods:{
					send(){
						this.$emit('child-msg',this.a);
					}
				}
			}
		}
	}
}
});
子组件把自己的数据发送给父组件，用vm.$emit(事件名,数据)方法。事件名child-msg,发送的数据是子组件里的数据a。

父组件接收事件@child-msg="get"

4.slot

除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃，slot有占位置的作用效果。
当子组件模板只有一个没有属性的
 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

<div id="box">
	<aaa>
		<ul slot="ul-slot">
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
		</ul>
		<ol slot="ol-slot">
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ol>
	</aaa>
	<hr>
	<aaa>
	</aaa>
</div>
<template id="aaa">
	<h1>xxxx</h1>
	<slot name="ol-slot">这是默认的情况</slot>
	<p>welcome vue</p>
	<slot name="ul-slot">这是默认的情况2</slot>
</template>
var vm=new Vue({
	el:'#box',
	data:{
		a:'aaa'
	},
	components:{
		'aaa':{
			template:'#aaa'
		}
	}
});