20.Vue slot插槽
我们前面讲过传值,今天讲的是可以直接传一个标签,通过slot插槽实现;主要作用: 某一个区块,先占位,然后可以动态的搞个标签进去,方便切换该位置的内容,无需再搞多个页面; 新建Foot.vue 假如引入该组件的父组件没有给插槽设置内容,那默认就显示 ‘’要被替换的内容‘’;如果设置了内容,那将被替换掉;<template><div class="foot"><
·
我们前面讲过传值,今天讲的是可以直接传一个标签,通过slot插槽实现;
主要作用:
某一个区块,先占位,然后可以动态的搞个标签进去,方便切换该位置的内容,无需再搞多个页面;
新建Foot.vue
假如引入该组件的父组件没有给插槽设置内容,那默认就显示 ‘’要被替换的内容‘’;
如果设置了内容,那将被替换掉;
<template>
<div class="foot">
<!--这里的 <slot name="f">要被替换的内容</slot> 就是定义了一个插槽;以及取名f;-->
<slot name="f">要被替换的内容</slot>
</div>
</template>
<script>
export default {
name: "Foot"
}
</script>
<style scoped>
.foot{
padding: 20px;
}
</style>
然后App.vue里动态的设置标签内容,来实现动态的替换;
<template>
<div>
<!--声明标签-->
<Menu :menus="menus" :webSite="webSite"></Menu>
<Foot>
<!--指定插槽内容-->
<div slot="f">
vue
</div>
</Foot>
</div>
</template>
<script>
import PubSub from 'pubsub-js'
import Menu from './components/Menu' // 引入组件
import Foot from "./components/Foot";
export default {
name: 'App',
components:{
Menu:Menu, // 映射组件标签,ES6中属性名和属性值相同可以省略属性值只写属性名
Foot
},
data(){
return { //定义菜单的对象数组,将其传递给子组件
menus:[{id:1,name:'科技'},{id:2,name:'文化'},{id:3,name:'政治'}],
webSite:{url:'https://cn.vuejs.org/',title:'Vue.js官网'}
}
},
methods:{
addMenu(menu){
this.menus.push(menu)
}
},
mounted() {
// 订阅消息,相当于前面的绑定事件监听;
// 订阅消息,参数一 消息名 参数二 处理的回调函数
PubSub.subscribe('add',(msg,data)=>{
console.log("msg:"+msg)
console.log("data:"+data)
this.addMenu(data);
})
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)