Vue之插槽props案例

女爷i 2022-10-01 07:57 56阅读 0赞

**效果图**

**父组件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