作用域插槽

最新推荐文章于 2023-11-27 15:09:32 发布

jwz934738949

最新推荐文章于 2023-11-27 15:09:32 发布

阅读量780

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/107405041

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

作用域插槽指的是父组件去替换插槽中的标签，而插槽中的内容由子组件显示。就是说，在父组件中以不同的标签以及形式显示子组件中的内容。
首先在slot标签中绑定某一属性，该属性的值即为要传递的数据。在本例中，要传递movies数组，所以在slot中绑定的data属性的值为movies。
在父组件中使用模板来调用传递的数据，添加v-slot指令，值为自定义的字符串。使用字符串.绑定的属性名，得到传递的数据对象，之后再进行相应的操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域插槽</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn>
    <!--    创建v-slot，命名为slot，调用插槽中的属性data,可以获取子组件中的内容-->
    <template v-slot="slot">
      <span v-for="item in slot.data">{{item}}~~</span>
    </template>
  </cpn>
  <cpn>
    <template v-slot="slot">
      <!--      将子组件中的数据使用'--'连接起来-->
      <span>{{slot.data.join('--')}}</span>
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <h2>作用域插槽的使用</h2>
    <!--    绑定data属性，为父组件提供,data中的值为要传递的数据-->
    <slot :data="movies">
      <ul>
        <li v-for="item in movies">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            movies: ['辛德勒的名单', '阿凡达', '霸王别姬', '星际迷航', '变形金刚']
          }
        }
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作用域插槽

作用域插槽指的是父组件去替换插槽中的标签，而插槽中的内容由子组件显示。就是说，在父组件中以不同的标签以及形式显示子组件中的内容。首先在slot标签中绑定某一属性，该属性的值即为要传递的数据。在本例中，要传递movies数组，所以在slot中绑定的data属性的值为movies。在父组件中使用模板来调用传递的数据，添加v-slot指令，值为自定义的字符串。使用字符串.绑定的属性名，得到传递的数据对象，之后再进行相应的操作。<!DOCTYPE html><html lang="en.
复制链接

扫一扫

专栏目录