Vue -slot插槽、作用域插槽

最新推荐文章于 2024-06-05 23:04:32 发布

前端初学者000001

最新推荐文章于 2024-06-05 23:04:32 发布

阅读量705

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43253590/article/details/127836450

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

让组件更具有扩展性
插槽就是在子组件占个位置，把父组件的数据通过props按需传递过来进行展示

在这里插入图片描述

有几个部分复用，就要预留几个插槽,，需要给插槽起个名字，name=‘’’
具名插槽

<div id="app">
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button slot="left">返回</button></cpn>
</div>


<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

组件作用域
只会在自己的组件作用域里去寻找变量值

在这里插入图片描述

作用域插槽

slot在2.5.X版本一下必须使用template标签进行包裹，以上的话div就可以；
通过slot-scope="slot"去取对应的插槽返回的数据

<div id="app">
  <cpn>
//    <!--目的是获取子组件中的pLanguages-->
	 <template slot-scope="slot">
      <span>{{slot.data.join(' - ')} }</span>
    </template>
  </cpn>
  <cpn>
</div>

插槽模板

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

vue实例

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }
        }
      }
    }
  })