20.Vue slot插槽

  我们前面讲过传值，今天讲的是可以直接传一个标签，通过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>