1-9.vue指令：v-slot指令与插槽

v-slot的作用

v-slot又叫做插槽，其主要是用在组件中，起到一个占位的作用。当组件复用时，某些地方对于不同地方组件的使用需要展示不同内容时就使用v-slot,当具体使用后根据自己的需求进行替换即可。

v-slot的使用

1.代码展示
<body>
  <div id='app'>
    <cpn1>
      <!-- 替换成按钮 -->
      <button>我想替换成按钮展示</button>
    </cpn1>
    -------------------------------------
    <cpn1>
      <!-- 替换成按钮 -->
      <span>我想替换成span展示</span>
    </cpn1>
  </div>

  <!-- 组件里面展示的内容，里面放一个卡槽 -->
  <template id='cpn'>
    <div>
      下面的内容根据需求来展示：<br />
      <slot></slot>
    </div>
  </template>

  <script>
    // 定义的一个组件
    const cpn1 = {
      template: '#cpn',
    }

    const app = new Vue({
      el: '#app',
      data: {
        changeLogin: true
      },
      // 注册组件
      components: {
        cpn1,
      }
    });
  </script>

</body>
2.过程分解

在这里插入图片描述

3.结果展示

在这里插入图片描述

具名插槽

具名插槽就是给一个插槽一个name属性，用于区分各个插槽。其主要的使用场景是一个组件中需要替换的地方不止一处时，为了区分替换的哪个插槽而准备的。

1.代码展示
<body>
  <div id='app'>
    <cpn1>
      <template v-slot:first>
        <button>我想替换成按钮展示</button>
      </template>
      <template v-slot:second>
        <a href="#">我想替换成a展示</a>
      </template>
      <template v-slot:third>
        <span>我想替换成span展示</span>
      </template>
    </cpn1>
  </div>

  <!-- 组件里面展示的内容，里面放一个卡槽 -->
  <template id='cpn'>
    <div>
      下面的内容根据需求来展示：<br />
      <p>---------------------------------------------</p>
      第一个需要替换的地方：<br/>
      <slot name='first'></slot>
      <p>---------------------------------------------</p>
      第二个需要替换的地方：<br/>
      <slot name='second'></slot>
      <p>---------------------------------------------</p>
      第三个需要替换的地方：<br/>
      <slot name='third'></slot>
      <p>---------------------------------------------</p>
    </div>
  </template>

  <script>
    // 定义的一个组件
    const cpn1 = {
      template: '#cpn',
    }

    const app = new Vue({
      el: '#app',
      data: {
        changeLogin: true
      },
      // 注册组件
      components: {
        cpn1,
      }
    });
  </script>

</body>
2.过程分解

在这里插入图片描述

3.结果展示

在这里插入图片描述

作用域插槽

作用域插槽主要涉及到的是要展示的数据在组件里面，当我们去替换内容时需要用到组件里面的数据，此时需要通过作用域插槽去传递数据给使用者让他能够获取到数据去展示。

1.代码展示
<body>
  <div id='app'>
    <cpn1 v-slot="slotProps">
      <ul>
        <li v-for='item in slotProps.hobby'>{{item}}</li>
      </ul>
    </cpn1>
  </div>

  <!-- 组件里面展示的内容，里面放一个卡槽 -->
  <template id='cpn'>
    <div>
      下面的内容根据需求来展示：<br />
      <p>---------------------------------------------</p>
      <slot :hobby='hobby'></slot>
    </div>
  </template>

  <script>
    // 定义的一个组件
    const cpn1 = {
      template: '#cpn',
      data() {
        return {
          hobby: ['篮球','rap','唱跳']
        }
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        changeLogin: true
      },
      // 注册组件
      components: {
        cpn1,
      }
    });
  </script>

</body>
2.过程分解

在这里插入图片描述

3.结果展示

在这里插入图片描述

具名插槽和作用域插槽结合使用

1.代码展示
<body>
  <div id='app'>
    <cpn1 v-slot:left="slotProps">
      <ul>
        <li v-for='item in slotProps.hobby'>{{item}}</li>
      </ul>
    </cpn1>
  </div>

  <!-- 组件里面展示的内容，里面放一个卡槽 -->
  <template id='cpn'>
    <div>
      下面的内容根据需求来展示：<br />
      <p>---------------------------------------------</p>
      <slot name='left' :hobby='hobby'></slot>
    </div>
  </template>

  <script>
    // 定义的一个组件
    const cpn1 = {
      template: '#cpn',
      data() {
        return {
          hobby: ['篮球','rap','唱跳']
        }
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        changeLogin: true
      },
      // 注册组件
      components: {
        cpn1,
      }
    });
  </script>

</body>
2.过程分解

在这里插入图片描述

Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

GitTalk | 使用面向业务的狮偶编程语言提升开发效率

avatar GitCode 开源社区
cover

GitTalk | DevUI Suits 场景解决方案

avatar GitCode 开源社区
cover

GitTalk | DevUI Admin 前端项目构建

avatar GitCode 开源社区