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>
Vue.js框架学习五
猜你喜欢
转载自blog.csdn.net/m0_37727198/article/details/81907669
今日推荐
周排行