内容：
1.绑定原生事件
2.非父子组件传值
3.插槽(slot)
4.作用域插槽
5.动态组件与v-once指令
1.绑定原生事件
<body>
<div id="app">
<child @click1="handleClick"></child>
<child @click.native="handleClick2"></child>
</div>
</body>
<script>
Vue.component('child', {
template: '<div @click="handleChildClick">Child</div>',
methods: {
handleChildClick: function () {
//alert('childClick');
//this.$emit('click1')
}
}
});
// 方式1，通过$emit()进行传递
// 方式2, 使用原生的click
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
},
methods: {
handleClick: function () {
alert('click');
},
handleClick2: function () {
alert('click2');
}
}
})
</script>
2.非父子组件传值
使用场景：兄弟节点、非兄弟节点
使用总线机制/发布订阅模式/观察者模式解决该问题
<body>
<div id="app">
<child content="Dell" ></child>
<child content="Lee"></child>
</div>
</body>
<script>
// 总线机制/发布订阅模式/观察者模式
Vue.prototype.bus = new Vue(); // 创建的每一个vue实例上都带有bus属性
Vue.component('child', {
props: {
content: String,
},
template:'<div @click="handleClick">{{Content}}</div>',
methods: {
handleClick: function () {
// 向外传递事件
this.bus.$emit('change', this.Content)
}
},
data: function(){
return {
Content: this.content,
}
},
mounted: function () {
var this_ = this;
// 接受事件
this.bus.$on('change', function (value) {
this_.Content=value;
})
}
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
}
})
</script>
3.插槽(slot)
插槽
<body>
<div id="app">
<child><p>dell</p></child>
<child><p>dell</p><p slot="footer">45555</p></child>
</div>
</body>
<script>
// 父组件向子组件传递dom元素
// slot可以指定默认值
// slot可以指定名字
Vue.component('child', {
props: ['content'],
template: '<div>' +
'<p>hello</p>' +
'<slot></slot><slot name="footer"></slot>' +
'</div>',
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
}
})
</script>
4.作用域插槽
<body>
<div id="app">
<child>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</child>
</div>
</body>
<script>
// 使用场景，当子组件需要循环，或者数据从外部传递时
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3, 4]
}
},
template: '<div><ul><slot v-for="item in list" :item="item"></slot></ul></div>'
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
}
})
</script>
5.动态组件与v-once指令
<body>
<div id="root">
动态组件
根据is内数据变化自动加载组件
<component :is="show"></component>
<!-- <child-one v-if="show === 'child-one'"></child-one>-->
<!-- <child-two v-if="show === 'child-two'"></child-two>-->
<button @click="handleBtnClick">change</button>
</div>
<script>
Vue.component('child-one', {
// v-once会将数据加载到内存中，提高性能
template: '<div v-once>child-one</div>'
});
Vue.component('child-two', {
template: '<div v-once>child-two</div>'
});
var vm = new Vue({
el: '#root',
data: {
show: 'child-one',
},
methods:{
handleBtnClick: function () {
this.show = (this.show === 'child-one' ? 'child-two': 'child-one');
}
}
})
</script>
评论列表
已有0条评论