Vue.js框架学习五

4-4绑定原生的事件。不同于this.$emit('change')监听子组件中自定义事件，在返回到父组件原生事件函数

中如上4-2。
<div id="root">
<counter @click.native="handleClick"><counter>
</div>
<script>
Vue.component("counter",{
	
	template:"<div>Count</div>"
})
var vm=new Vue({
el:"#root",	
methods:{
	handleClick:function (){
		alert("监听原生事件")
	}
}
})
</script>


4-5Vue中非父子组件传值。总线机制。
   如：兄弟关系
那个监听是两个组件都在监听，但是你点击其中某一个组件的时候，获得到的是其中的一个值，但是两个组件

都监听到了。弹出的content只是点击的那个组件的值

<div id="root">
<child count="李白"></child>
<child count="杜甫"></child>
</div>
<script>
//设置全局Vue属性
Vue.prototype.bus=new Vue();
Vue.component("child",{
	props:{
		count:String,
	},
	data:function(){
		return{
		  selfCount:this.count,
		}
		
	},
	template:'<div @click="handleClick">{{selfCount}}</div>',
	methods:{
		handleClick:function(){
			this.bus.$emit('change',this.selfCount);
		}
	},
	//生命周期钩子，当事件监听时候，运行的对应方法
	mounted:function(){
		var this_=this;
		this.bus.$on('change',function(msg){
			//这里因为兄弟子组件，会同时反映两次
			
			this_.selfCount=msg;
			
		})
	}
})
var vm = new Vue({
el:"#root",

})
</script>


4-6在Vue中使用插槽。
什么是插槽，有点不了解，看完视频后有点模糊。

使用场景：
 子组件除了展示模板内容，还展示父组件提供的属性内容
<div id="root">
<child content="<p>Dell</p>"></child>
</div>
<script>
Vue.component('child',{
props:['content'],
template:'<div><p>hello</p><div v-html=“this.content”></div></div>',
})
var vm= new Vue({
el:‘#root’,
})
</script>
当传递内容很多时候，代码阅读不变。当子组件的一部分显示内容是由父组件的Dom传递过来的数据时候，
我们可用插槽来解决实现这一问题。通过使用<slot></slot>，还可以定义默认值。


<div id="root">
	<child></child>
</div>
<script>
Vue.component('child',{
  template:'<div><p>hello</p><slot>默认内容</slot></div>'
})
var vm= new Vue({
el:'#root',
})
</script>



域名插槽：注意要用双引号，单引号容易出现错误，不能识别。
<div id="root">
	<body-content>
		<div class="header" slot="header">header2</div>
	    <div class="fonter" slot="fonter" >fonter3</div>
	</body-content>
</div>
<script>
Vue.component("body-content",{
  template:'<div><slot name="header"></slot><div class="content">content3</div><slot 

name="fonter"></slot> </div>'
            
            
})
var vm= new Vue({
el:'#root',
})
</script>


4-7作用域插槽


使用场景：v-for循环，或者显示的数据由外部传递进来的时候。
传统的父子组件

<div id="root">
	<child>
	<template slot-scope="props">
		<h1>{{props.item}}</h1>
	</template>
	</child>
</div>
<script>
Vue.component('child',{
	data:function(){
		return {
			list:[1,2,3,4]
		}
	},
	template:'<div><ul><slot v-for="item of list" :item=item></slot></ul></div>'
	
})
var vm= new Vue({
el:'#root',
})
</script>



4-8动态组件：
传统方法：this.type=this.type==='onegood'?'twonice':'onegood'中的'onegood'表示的是子组件的属性名

称，不是各自模板中的<div>onegood</div>内容。


<div id="root">
	<childone v-if="type==='onegood'"></childone>
	<childtwo v-if="type==='twonice'"></childtwo>
    <button @click="handleBtnClick">点击</button>		
</div>
<script>
Vue.component('childone',{
	template:'<div>onegood</div>'
})
Vue.component('childtwo',{
	template:'<div>twonice</div>'
	
})
var vm = new Vue({
	el:'#root',
	data:{
		type:'onegood',
	},
	methods:{
		handleBtnClick:function(){
			this.type=this.type==='onegood'?'twonice':'onegood'
		}
	}
	
})
</script>

而是用动态组件，简化使用两层子组件，利用<component></component>,加入：is="type",
来判断，根据type属性的变化，来改变模板template的内容。


<div id="root">
    <component :is="type"></component>
    <button @click="handleBtnClick">点击</button>		
</div>
<script>
Vue.component('onegood',{
	template:'<div>onegood2</div>'
})
Vue.component('twonice',{
	template:'<div>twonice2</div>'
	
})
var vm = new Vue({
	el:'#root',
	data:{
		type:'onegood',
	},
	methods:{
		handleBtnClick:function(){
			this.type=this.type==='onegood'?'twonice':'onegood'
		}
	}
	
})
</script>

v-once可以提高静态数据的展示内容。

<div id="root">
	<onegood v-if="type==='onegood'"></onegood>
	<twonice v-if="type==='twonice'"></twonice>

    <button @click="handleBtnClick">点击</button>		
</div>
<script>
Vue.component('onegood',{
	template:'<div v-once>onegood2</div>'
})
Vue.component('twonice',{
	template:'<div v-once>onegood3</div>'
	
})
var vm = new Vue({
	el:'#root',
	data:{
		type:'onegood',
	},
	methods:{
		handleBtnClick:function(){
			this.type=this.type==='onegood'?'twonice':'onegood'
		}
	}
	
})
</script>