vue-cli(四)

向下传递数据

这里childslot是parentslot的子类，所以可以向下传递数据。

这里是直接使用child-slot标签进行传递数据，然后由props来接收数据

<template>
  <div class="parentslot">
    <child-slot title="美食" :foods="foods"></child-slot>
    <child-slot title="游戏" :games="games"></child-slot>
    <child-slot title="电影" :movies="movies"></child-slot> 
  </div>
</template>

<script>
import ChildSlot from './ChildSlot.vue';
export default{
  name:"ParentSlot",
  data(){
    return{
      foods :["锅包肉","东北大拉皮","红烧肉","小鸡炖蘑菇"],
      games :["王者荣耀","蛋仔派对","连连看","原神"],
      movies :["阿甘正传","泰塔尼克号","云边有个小卖部","白鹿原"]
    }
  },
  components:{
    ChildSlot
  }
}
</script>

<template>
  <div class="childslot">
    <h2>{{ title }}分类</h2>
    <ul v-for="(value,index) in foods" :key="index">
        <li>{{ value }}</li>
    </ul>
    <ul v-for="(value,index) in games" :key="index">
        <li>{{ value }}</li>
    </ul>
    <ul v-for="(value,index) in movies" :key="index">
        <li>{{ value }}</li>
    </ul> 
  </div>
</template>

<script >
export default{
    name:"ChildSlot",
    data(){
        return {

        }
    },
    props:["foods","games","movies"],
    
}

使用slot插槽进行数据的传递

这里是需要传递的数据，

child-slot可以给子类传递数据

    <child-slot title="美食" >
      <img src="../../../assets/logo.png">
    </child-slot>
    <child-slot title="游戏" >
      <ul>
        <li>王者</li>
        <li>蛋仔</li>
        <li>连连看</li>
        <li>原神</li>
      </ul>
    </child-slot>
    <child-slot title="电影" >
      <img src="../../../assets/11.png" alt="" >
    </child-slot>

在子类用slot标签进行接收并显示

<slot></slot>

这是把父类中的所有没有命名的child-slot全部展示，有名字的child-slot则不展示。

给slot命名

    <child-slot title="美食" >
      <img src="../../../assets/logo.png" slot="one">
    </child-slot>

这个slot现在有一个名字叫做one，

如果子类有slot调用名字叫做one，slot才会显示

<slot name="one"></slot>

否则不会显示。

slot的默认值

如果有的child-slot中间没有内容，还会独占模块，这显然是不行的。

我们可以给它设定默认值：

可以设置为图片，视屏，文字等都可以。

<slot>这是默认值2</slot>

通过事件总线传递数据

这里是通过vue.js实例化一个vue对象，然后定义一个全局事件总线，通过全局事件总线进行数据传递，当然，数据传递需要在同一个文件中进行，否则需要通过路由来实现。

<template>
  <div class="parentbus">
    <first-bus></first-bus>
    <second-bus></second-bus>
  </div>
</template>

<script>
import FirstBus from './FirstBus.vue';
import SecondBus from './SecondBus.vue';
export default{
    name:"ParentBus",
    data(){
        return {
            newstr:" "
        }
    },
    components:{
        FirstBus,
        SecondBus
    },
    mounted(){

    }
}
</script>

<template>
  <div class="firstbus">
    <button @click="eventStr">first组件</button>
  </div>
</template>

<script>
import bus from '@/bus/bus';
export default{
    name:"FirstBus",
    data(){
        return{
            str:"这是first中的数据"
        }
    },
    methods:{
        eventStr(){
            // bus.$emit("sendVal",this.str);
            this.$bus.$emit("sendVal",this.str);
        }
    }
}
</script>

<template>

</template>

<script>
import bus from '@/bus/bus';
export default{
    name:"SecondBus",
    mounted(){
        bus.$on("sendVal",(value)=>{
            console.log("second中接收的value",value)
        }),
        this.$bus.$on("sendVal",(value)=>{
            console.log("second中接收的value：",value);
        })
    },
    destroyed(){
        // bus.$off("sendVal");
        this.$bus.$off("sendVal");
    }
}
</script>

import Vue from "vue";
export default new Vue();