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了