vue slot插槽

vue slot插槽vue slot插槽

我们前面讲过传值，今天讲的是可以直接传一个标签，通过slot插槽实现；

主要作用：

某一个区块，先占位，然后可以动态的搞个标签进去，方便切换该位置的内容，无需再搞多个页面；

原先的demo里，加个 Foot.vue；然后App.vue里动态的设置标签内容，来实现动态的替换；

<template>

    <div class="foot">

      <slot name="f">要被替换的内容</slot>

    </div>

</template>

<script>

  export default {

    name: 'Foot'

  }

</script>

<style scoped>

  .foot{

    padding: 20px;

  }

</style>

这里的  <slot name="f">要被替换的内容</slot> 就是定义了一个插槽；

以及取名f；

假如引入该组件的父组件没有给插槽设置内容，那默认就显示 ‘’要被替换的内容‘’；

如果设置了内容，那将被替换掉；

我们修改下App.vue；

<template>

  <div>

    <!--使用组件 传值-->

    <!--<Menu :menus="menus" :webSite="webSite" :addMenu="addMenu"></Menu>-->

    <!--给Menu标签对象绑定addMenu事件监听-->

    <!--Menu :menus="menus" :webSite="webSite" @addMenu="addMenu"></Menu>-->

    <!--注册引用-->

    <!--<Menu :menus="menus" :webSite="webSite"  ref="menu"></Menu>-->

    <Menu :menus="menus" :webSite="webSite"></Menu>

    <Foot>

      <div slot="f">

        版权所有：{{site}}

      </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,  // 映射组件标签

      Foot

    },

    data(){

      return {

        site:'http://www.java1234.com',

        menus:[

          {

            id:1,

            name:'科技'

          },

          {

            id:2,

            name:'文化'

          },

          {

            id:3,

            name:'政治'

          },

          {

            id:4,

            name:'娱乐'

          }

        ],

        webSite:{

          url:'http://www.java1234.com',

          title:'Java知识分享网'

        }

      }

    },

    methods:{

      addMenu(menu){

        this.menus.push(menu)

      }

    },

    mounted () {

      // 绑定监听

      // this.$refs.menu.$on('addMenu',this.addMenu);

      // 订阅消息，参数一 消息名  参数二 处理的回调函数

      PubSub.subscribe('add',(msg,data)=>{

        this.addMenu(data);

      })

    }

  }

</script>

<style scoped>

</style>

这里：

 <div slot="f">

        版权所有：{{site}}

      </div>

这里就指定了插槽内容；