[干货]关于vue作用域插槽的新的深入理解

父级组件

<template>
  <div class="wrapper">
    <son1 title="标题3" :content="listData3" @father="teClick">
      <template v-slot="scope">
        <b class="qianz">{{scope.item.prefix ? ‘有前缀‘ : ‘无前缀‘}}</b>
      </template>
    </son1>
    </son1>
  </div>
</template>

<script>
import son1 from ‘./1_son.vue‘;

export default {
  components: {
    son1
  },
  props: {},
  data() {
    return {
      listData1: [‘列表项1‘, ‘列表项2‘, ‘列表项3‘],
      listData2: [{ text: ‘第二个列表的列表项1‘, img: ‘example.png‘ }, { text: ‘第二个列表的列表项2‘, img: ‘example.png‘ }, { text: ‘第二个列表的列表项3‘, img: ‘example.png‘ }],
      listData3: [
        { text: ‘第三个列表的列表项1‘, prefix: true, remark: ‘附加的备注1‘ },
        { text: ‘第三个列表的列表项2‘, prefix: false, remark: ‘附加的备注2‘ },
        { text: ‘第三个列表的列表项3‘, prefix: true, remark: ‘附加的备注3‘ }
      ],
      list: [
        {
          name: ‘tate‘,
          age: 26,
          single: true,
          stu: false,
          state: 1
        },
        {
          name: ‘kevin‘,
          age: 23,
          single: true,
          stu: true,
          state: 2
        },
        {
          name: ‘harden‘,
          age: 28,
          single: false,
          stu: false,
          state: 3
        },
        {
          name: ‘Jimmy‘,
          age: 29,
          single: false,
          stu: true,
          state: 4
        }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    teClick(vl) {
      console.log(‘我是‘, vl);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style  scoped>
.wrapper {
}
.qianz {
  color: green;
}
</style>

子级组件

<template>
  <div class="wrapper">
    <div class="list">
      <div class="list-title">{{title}}</div>
      <ul class="list-content">
        <li v-for="(item ,index) in content" :key="index">
          <div class="texheader">
            <div class="tximg"></div>
            <div @click="listD(item.text)">{{item.text}}</div>
          </div>
          <slot :item="item">{{item}}</slot>
          <div>我是页眉我是页眉我是页眉我是页眉我是页眉</div>
          <!-- <slot :item="item">{{item}}</slot> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    content: {
      type: Array
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    listD(data) {
      this.$emit(‘father‘, data);
    }
  },
  created() {},
  mounted() {
    console.log(this.content);
  }
};
</script>
<style  scoped>
.wrapper {
  width: 600px;
}
.tximg {
  width: 50px;
  height: 50px;
  background: green;
}
.texheader {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.list-content {
  color: blue;
  list-style: none;
  display: flex;
  flex-direction: row;
}
.list-content li {
  width: 33.33%;
}
.list-title {
  color: orange;
}
/* .list {
  width: 200px;
  height: 200px;
  border: 1px solid #cacaca;
} */
</style>

总结:

最重要的展现是:

在子组件当中,有一条<slot :item="item">{{item}}</slot>,它的作用有2条:

1>把从父组件通过props传到子组件的值传到了父组件的

v-slot="scope" 通过scope.item就可以获取到相对应的数组对象2>子组件其实已经有一定的结构了,当什么时候需求改变了,又需要在以前的组件中重新扩展一些内容的时候,这个时候就能体现出作用域插槽的作用了子组件的<slot :item="item">{{item}}</slot>插在原来子组件位置的哪里;父组件通过
<template v-slot="scope">
        <b class="qianz">{{scope.item.prefix ? ‘有前缀‘ : ‘无前缀‘}}</b>
      </template>

就会把相对应的新样式结构加入到原来的组件之中,非常的方便与灵活



原文地址:https://www.cnblogs.com/lsc-boke/p/10999271.html

时间: 2024-10-11 02:32:16

[干货]关于vue作用域插槽的新的深入理解的相关文章

具名插槽、作用域插槽的新写法

插槽 具名插槽 自 2.6.0 起有所更新.已废弃的使用 slot attribute 的语法 但是我们有了新的语法,如下: 子组件 childCom: <template id="childCom"> <div> <!-- 具名插槽的针对于组件中不止一个插槽的情况下使用,使用方式,即:给每个插槽指定 name 属性,在使用的时候需要给标签设置 slot 属性,且属性值为 对应的 name 属性的属性值 --> <slot name='left

细说Vue作用域插槽,匹配应用场景。

最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子,你会一看就懂): 1. 组件中的slot标签只能有有一个,而这一个slot用于替代组件调用时的多个标签.即一个slot代替一组范围的标签,即为作用域. 2. 作用域插槽的特殊在于:可在上层作用域中通过临时变量拿到组件定义时通过作用域插槽传递的数据. 3. 作用域插槽的技巧在于:可在上层作用域中通过拿

Vue作用域插槽:用作循环结构的模版

一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list="list" v-slot:default="{item}"> <!-- 插槽内容 --> <span v-if="item.isComplete">?</span> {{item.text}} </tod

新版vue作用域插槽的使用

2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用:  也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件的数据 html: <template> <div class="card-wrap"> <div class="foot"> <slot name="todo" v-bind:user="user

vue 作用域插槽

作用域插槽 作用域插件的目的就是:获取本组件的数据!. 示例代码todo-list组件: <ul> <li v-for="todo in filteredTodos" v-bind:key="todo.id" > <!-- 我们为每个 todo 准备了一个插槽, 将 `todo` 对象作为一个插槽的 prop 传入. --> <slot name="todo" v-bind:todo="todo

vue作用域插槽实践

引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def record_detailed(request): all_record = models.Record.objects.all() lis = [] for obj in all_record: lis.append({ 'username': obj.username, 'task_name':

436 vue slot:插槽基本使用,具名插槽,作用域插槽

1. 插槽 : 替换内容 / 分发内容 (1)占位,像出口<router-view></router-view>. (2)没有新的内容放进来,就用默认的. (3)<slot></slot>将被替换成组件内的对应子节点. 2. 基本使用 <el-car> <div>宝马发动机</div> </el-car> 组件的内部 02-插槽的基本使用.html <!DOCTYPE html> <html

Vue组件之作用域插槽

写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的"<p>父组件如果没有插入内容,我将被显示</p>"这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot&

Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单元格数据的显示格式,我们可以通过作用域插槽自定义数据的显示格式,对于二次开发来说具有很强的扩展性. 作用域插槽使用<template>来定义模板,可以带两个参数,分别是: slot-scope    ;模板里的变量,旧版使用scope属性 slot              ;该作用域插槽的nam