slot-scope

在App.vue中将标签等信息填充到子组件Left中

默认情况下，在使用组建的时候，提供的内部会被填充到名字为default中的具名插槽之中 1.如果要把内容填充到指定的名称插槽中，需要使用v-slot这个指令 2.v-slot后面要跟上插槽的名字 3.v-slot指令不能直接用在元素身上，必须用在template标签上 4.template这个标签，它是一个虚拟标签，只起到包裹性质的作用，但是不会被渲染成任何实质性的html元素

当出现多个插槽时，使用v-slot指定使用哪个插槽

APP.vue中

  <Left>
        <template v-slot:default> 
          <p>这是在Left组件的内容区域，声明p标签</p>
        </template>
      </Left>

Left.vue中

  <div>
        <h3>Left组件</h3>
        <slot name="default"></slot>
    </div>

1.App.vue

<template>
    <div id="app">
      <Left>
        <!-- 默认情况下，在使用组建的时候，提供的内部会被填充到名字为default中的具名插槽之中 -->
        <!-- 1.如果要把内容填充到指定的名称插槽中，需要使用v-slot这个指令 -->
        <!-- 2.v-slot后面要跟上插槽的名字 -->
        <!-- 3.v-slot指令不能直接用在元素身上，必须用在template标签上 -->
        <!-- 4.template这个标签，它是一个虚拟标签，只起到包裹性质的作用，但是不会被渲染成任何实质性的html元素 -->
        <!-- <template v-slot:default> -->
         <template>
          <p>这是在Left组件的内容区域，声明p标签</p>
        </template>
      </Left>
    </div>
</template>
<script>
import Left from './components/Left.vue'
export default {
   data() {
      return {
      }
   },
   activated() {
   },
 watch: {
},
created(){
},
mounted(){
},
methods:{
},
components:{
  Left
}
​
}
</script>
<style>
</style>
​

2.Left.vue

<template>
    <div>
        <h3>Left组件</h3>
        <!-- <slot name="default"></slot> -->
        <slot></slot>
    </div>
</template>
<script>
export default {
   data() {
      return {
      }
   },
   activated() {
   },
 watch: {
},
created(){
},
mounted(){
},
methods:{
}
​
​
}
</script>
<style>
</style>
​