Vue之插槽props案例

效果图

父组件APP.VUE

<template>
  <div id="app">
        <div class="container">
            <div class=" col-12  col-sm-8 col-md-6 col-lg-6">
                  <div class="card">
              <son :val="curcolor">
                    <template #header="curcolor">
                      <div :class="['card-header' ,'text-light' ,'bg-'+curcolor.cc]">
                        <h3>{{songName}}</h3>
                      </div>
                    </template>
                    <template #body> 
                      <div class="card-body">
                        <p class="card-text">现在 一万首的mp3 一万次疯狂的爱</p>
                        <p class="card-text">灭不了一个渺小的孤单</p>
                        <p class="card-text">让我要 我疯 我要 我爱</p>
                        <p class="card-text">就是 我要 我疯 我要 我爱</p>
                        <p class="card-text">现在 盛夏的一场狂欢 来到了光年之外</p>
                        <p class="card-text">长大难道是人必经的溃烂</p>
                        <p class="card-text">放弃规则 放纵去爱</p>
                        <p class="card-text">放肆自己 放空未来</p>
                        <p class="card-text">我不转弯 我不转弯 我不转弯 我不转弯</p>
                      </div>
                       </template>
                    <template #footer="curcolor"> 
                      <div class="card-footer">
                          <p class="card-text">词曲 : 阿信</p>
                          <p class="card-text">演唱 : 五月天</p>
                        <a href="#" :class="['btn', 'btn-'+curcolor.cc]"  @click="func">点击弹出歌名</a>
                      </div>
                      </template>
                    
        </son>

                  </div>
              </div>
                <div class="form-check" v-for="(item, index) in colors" :key="index">
                    <input class="form-check-input" type="radio" name="exampleRadios" :id="'exampleRadios'+index"  v-model="curcolor" :value="item.color" >
                    <label class="form-check-label" :for="'exampleRadios'+index">
                      {{item.name}}---{{index}}---{{item.color}}
                    </label>
                  </div>

        </div>
       

        



  </div>
</template>

<script>
  import son from '@/components/son.vue'
export default {
  name: 'app',
  data() {
    return {
      songName:'盛夏光年',
      curcolor:'primary',
      colors:[{'color':'primary','name':"默认"},{'color':'danger','name':"红色"},{'color':'success','name':"绿色"}],

    }
  },
  computed: {
   
  },
  components:{
    son
  },
  methods: {
   func(){
     alert(this.songName);
   }
  },
}
</script>

<style>

</style>

复制代码

子组件son.vue

<template>
    <div>
        <slot name="header" :cc="val"></slot>
        <slot name="body"></slot>
        <slot name="footer" :cc="val"></slot>
    </div>
</template>
<script>
export default {
    props:['val'],
    data() {
        return {
        //    vv:this.val
        }
    },
    methods: {
 
    },
}
</script>

复制代码

slot的总结:

Vue中插槽的作用就是父亲的相同规格的东西,给一个子类使用,并且这个子类是个模板格式固定的,如果没有slot,那么父类不同的东西,想给子类用,子类需要多个了

然后父亲给传递子类消息,是在子类的组件名旁边加 :val="curcolor",最重要的是我要点击子类的按钮,想要让父类的歌名alert时,直接可以在父组件中定义方法,不需要再$emit了

转载于:https://juejin.im/post/5cde43cde51d4510583d13fd