Vue2 插槽

1.什么是插槽

 

        插槽(Slot)是vue为组件的封装者提供能力。允许开发者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽。

<template>
  <div id="">
    <h1>App根组件</h1>
    <!-- Left组件和Right组件渲染区域 -->
    <div class="comsbox">
      <Left>
        <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为default的插槽中 -->
        <!-- 1. 如果要把内容填充到指定名称的插槽中，需要使用v-slot:这个指令 -->
        <!-- 2. v-slot:后面要跟上插槽的名字 -->
        <!-- 3. v-slot:指令不能用在元素身上,必须用在template标签上 -->
        <!-- 4. template这个标签,它是一个虚拟的标签,只起到包裹性的作用,但是,不会被渲染为任何实质性的HTML元素 -->
        <template v-slot:default>
          <p>这是在Left组件得到内容区域，声明的p标签</p>
        </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left";
import Right from "@/components/Right.vue";
export default {
  data() {
    return {};
  },
  methods: {},
  components: {
    Left,
    Right,
  },
};
</script>

<style lang="less" scoped>
</style>

<template>
  <div id="">
    <h3>Left根组件</h3>
    <hr>
    <!-- 声明一个插槽区域 -->
    <!-- Vue官方规定：每个slot插槽，都要有一个name名称 -->
    <!-- 如果省略了slot的name属性，则有一个默认名叫做default -->
    <slot name="default"></slot>
  </div>
</template>

<script>
   export default{
    
  }
</script>

<style lang="less" scoped>
  
</style>

2. v-slot的简写是：#

3. 具名插槽的定义和使用 

        

    <Article>
      <template #title>
        <h3>一首诗</h3>
      </template>
      <template #content>
        <div>
          <p>鹅鹅鹅</p>
          <p>鸡鸡鸡</p>
          <p>鸭鸭鸭</p>
        </div>
      </template>
      <template #author>
        <div>作者:前端大leader</div>
      </template>
    </Article>



<template>
  <div class="article-container">
    <!-- 文章的标题 -->
    <div class="header-box">
        <slot name="title"></slot>
    </div>
    <!-- 文章的内容 -->
    <div class="content-box">
        <slot name="content"></slot>
    </div>
    <!-- 文章的作者 -->
    <div class="footer-box">
        <slot name="author"></slot>
    </div>
  </div>
</template>

4. 作用域插槽 

        在封装组件时，为预留的<slot>提供属性对应的值，这种用法叫做"作用域插槽"！

       

 <div class="content-box">
        <!-- 在封装组件时，为预留的<slot>提供属性对应的值，这种用法叫做"作用域插槽" -->
        <slot name="content" msg='hello vue.js'></slot>
 </div>



<template #content="object">
        <div>
          <p>鹅鹅鹅</p>
          <p>鸡鸡鸡</p>
          <p>鸭鸭鸭</p>
          <p>{{object.msg}}</p>
        </div>
</template>

4. 作用域插槽的解构赋值

        

<div class="content-box">
        <!-- 在封装组件时，为预留的<slot>提供属性对应的值，这种用法叫做"作用域插槽" -->
        <slot name="content" msg='hello vue.js' :user="userinfo"></slot>
</div>
<script>
export default {
    // 首字母一定大写
  name: 'MyArticle',
  data() {
    return {
        userinfo:{
            name:"一匹马",
            age:19,
        }
    };
  },
  methods: {},
};
</script>


<template #content="{msg,user}">
        <div>
          <p>鹅鹅鹅</p>
          <p>鸡鸡鸡</p>
          <p>鸭鸭鸭</p>
          <p>{{msg}}</p>
          <p>{{user.name}}</p>
        </div>
</template>