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>
<style lang="scss" scoped></style>

父组件：

<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>