Vue 插槽

作用：父组件来动态决定子组件的内容

默认值

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 组件中，slot里写上东西就成为了默认值

          
1
2
3
          <button type="submit">
  <slot>Submit</slot>
</button>

        

具名插槽

具名插槽也很简单，比如有多个插槽，我作为父组件，肯定想区别子组件中的几个插槽，那就要用slot标签的name属性来标识了，而父组件要决定在什么插槽里面放什么内容，就要将name的值赋值给slot属性传递给对应的插槽。如果slot没有name属性，就是匿名插槽了，而父组件中不指定slot属性的内容，就会被丢到匿名插槽中。

父组件(需要调用的组件)

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
          <template>
  <div>
    父组件
    <MyFooter>
      <template v-slot:footer>
        <div>list</div>
      </template>
    </MyFooter>
  </div>
</template>

<script>
import MyFooter from "./Child";
export default {
  components:{
    MyFooter
  }
};
</script>


        

子组件(需要被调用的组件) 放插槽

          
1
2
3
4
5
6
7
8
9
10
11
12
13
          <template>
  <div>
    <div>
      我是子组件
      <slot name='footer' />
    </div>
  </div>
</template>

<script>
export default {};
</script>
<style scoped></style>

        

作用域插槽

大概是说在作用域插槽内，父组件可以拿到子组件的数据。子组件可以在slot标签上绑定属性值

父组件(需要调用的组件)

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
          <template>
  <div>
    父组件
    <MyFooter title="我是父组件的属性，传到子组件的插槽">
      <template v-slot:footer="scope">
        <div>{{scope.a}}</div>
      </template>
    </MyFooter>
  </div>
</template>

<script>
import MyFooter from "./Child";
export default {
  components:{
    MyFooter
  },
  data(){
    return{
    }
  }
};
</script>

        

子组件(需要调用的组件)

          
1
2
3
4
5
6
7
8
9
10
11
12
          <template>
  <div>
    我是子组件，下面内容需要父组件来传值
    <div>
      <slot name="footer" a="我是子组件插糟的属性"> </slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

        

3.0废弃的slot-scope用法

父组件

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
          <template>
  <div>
    父组件
    <MyFooter title="我是父组件的属性，传到子组件的插槽">
      <template slot="footer" slot-scope="scope">
        <div>{{scope.a}}</div>
      </template>
    </MyFooter>
  </div>
</template>

<script>
import MyFooter from "./Child";
export default {
  components:{
    MyFooter
  },
  data(){
    return{
    }
  }
};
</script>

        

子组件

          
1
2
3
4
5
6
7
8
9
10
11
12
          <template>
  <div>
    我是子组件，下面内容需要父组件来传值
    <div>
      <slot name="footer" a="我是子组件插糟的属性"> </slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>