vue中v-slot指令如何應用Vue插槽及與slot、slot-scope的用法區別

不具名插槽

子組件：

<template>
  <div>
    <!--定義不具名插槽  -->
    <slot></slot>
    <h3>這里是不具名插槽組件</h3>
  </div>
</template>
 
<script>
export default {
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped></style>

 

在父組件中使用：

<template>
  <div id="inforCategory-warp">
    <!-- 不具名插槽 -->
    <lxsolt>不具名插槽</lxsolt>
    
  </div>
</template>
 
<script>
import lxsolt from './lx'
export default {
  name: 'inforCategory',
  components: {
    lxsolt,
  },
  data(){
    return{}
  }
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>

 

作用域插槽：
slot-scope使用(slot-scope綁定的是子組件的數據)：

在組件模板中書寫所需slot插槽，並將當前組件的數據通過v-bind綁定在slot標簽上。

在組件使用時，通過slot-scope=“scope”,接收組件中slot標簽上綁定的數據。

通過scope.xxx就可以使用綁定數據了
 

具名插槽以及作用域插槽

子組件：

<template>
  <div>
    <slot name="header" :msg="name"></slot>
    <h3>這里是具名插槽組件</h3>
    <slot name="footer"></slot>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
        name:'具名插槽組件'
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped></style>

 

父組件：

<template>
  <div id="inforCategory-warp">
        <!-- 具名插槽 -->
    <nameSlot>
      <div slot="header" slot-scope="scope">這里是slot-scope<span style="color:red">{{scope.msg}}</span>頭部</div>
      <div slot="footer">這里是尾部</div>
    </nameSlot>
    
  </div>
</template>
 
<script>
import nameSlot from './nameSlot'
export default {
  name: 'inforCategory',
  components: {
    nameSlot,
  },
  data(){
    return{
      msg:'具名插槽信息',
      msg2:'v-slot'
    }
  }
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>

 

v-slot以及作用域插槽

子組件：

<template>
  <div>
    <div class="container">
      <header>
        <!-- 我們希望把頁頭放這里 -->
        <slot name="header"></slot>
      </header>
      <section>
        v-slot組件
      </section>
      <footer>
        <!-- 我們希望把頁腳放這里 -->
        <slot name="footer" :msg="msg"></slot>
      </footer>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
        msg:'vsolt作用域插槽組件'
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

 

父組件：

 

<template>
  <div id="inforCategory-warp">
    <vsolt>
      <template v-slot:header>
        <h2>slot頭部內容</h2>
      </template>
 
      <p>直接插入組件的內容</p>
 
      <template v-slot:footer="scope">
        <h2>slot尾部內容<span style="color:red">{{scope.msg}}</span></h2>
      </template>
    </vsolt>
    
  </div>
</template>
 
<script>
import vsolt from './v-slot'
export default {
  name: 'inforCategory',
  components: {
    vsolt,
  },
  data(){
    return{
      msg:'具名插槽信息',
      msg2:'v-slot'
    }
  }
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>