scope=“scope“和作用域插槽

凌寒ᨐ舞

已于 2023-06-11 11:27:38 修改

阅读量273

点赞数

分类专栏：前端框架文章标签： javascript 开发语言 ecmascript

于 2023-06-11 10:35:40 首次发布

本文链接：https://blog.csdn.net/qq_37427142/article/details/131150657

版权

前端框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

试试目录

- 1.之前的使用
- 测试

1.之前的使用

在这里插入图片描述

父组件：

<template>
  <div>
    <child-component>
      <template scope="scope">
        <p>{{ scope.parentValue }}</p>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: 'Hello, child!'
    };
  }
};
</script>

子组件 (ChildComponent.vue)：

<template>
  <div>
    <slot :parentValue="parentValue"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentValue: ''
    };
  }
};
</script>

在上面的示例中，父组件使用标签包裹了一个标签，并在中定义了一个插槽。在插槽中，使用{{ scope.parentValue }}来显示父组件传递的值。

子组件中使用标签来定义插槽，并通过:parentValue="parentValue"将子组件中的parentValue属性传递给插槽。

通过这种方式，父组件可以将数据传递给子组件的插槽，并且子组件可以在中接收和使用这些数据。

slot
vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代

用于标记往哪个具名插槽中插入子组件内容。

<body>
     <div id="app">
        <slot-test>插槽的使用</slot-test>
		</div>
</body>

<script>
       Vue.component('slot-test',{
            template:`<div>
                <slot></slot>
                </div>`
        });
</script>

slot-scope
vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代

用于将元素或组件表示为作用域插槽。attribute 的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。

  <div id="app">
        <!-- 需求在视图上显示firstname的值在不改变组件的插槽内容 -->
        <!-- 1.在字符串模板中为需要访问的插槽绑定一个v-bind:自定义属性='要访问的数据'
            2.在<template>标签中绑定指令v-slot或者slot-scope='自定义属性' -->
       <slot-test>
           <!-- 第一种v-slot 导入的vue文件必须是vue2.6.0以后的 -->
        <!-- <template v-slot="slotDate">
            {{slotDate.user.firstname}}
        </template> -->
        <!-- 第二种 slot-scope -->
        <template slot-scope="slotDate">
            {{slotDate.user.firstname}}
        </template>
       </slot-test>
    </div>
    
    <script>
        Vue.component('slot-test',{
            data:function(){
                return {
                    user:{
                    firstname:'冰冰',
                    lastname:'范'
                }
                }
            }
         }
		</script>

scope
被 2.5.0 新增的 slot-scope 取代。推荐 2.6.0 新增的 v-slot。

用于表示一个作为带作用域的插槽的元素，它在 2.5.0+ 中被 slot-scope 替代。

除了 scope 只可以用于元素，其它和 slot-scope 都相同。

v-slot
可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。

用法：提供具名插槽或需要接收 prop 的插槽、

<template>
组件 (对于一个单独的带 prop 的默认插槽)
<body>
    <div id="app">
 <!-- 需求遍历父组件中数据通过子组件动态渲染到页面上 -->
       <slot-frusts :list="list">
            <template v-slot="fruits">
                <span :class='fruits.info.id==2?"current":""'>{{fruits.info.name}}</span>
            </template>
       </slot-frusts>
    </div>
    
    <script>
        Vue.component('slot-frusts',{
           props:['list'],
            template:`
            <div>
                <ul>
                    <li :key='item.id' v-for="(item,index) in list">
                        <slot :info='item'>{{item.id}}</slot>
                    </li>
                </ul>
            </div>`
        });
        let options={
            el:'#app',
            data:{
              list:[{
                  id:1,
                  name:'apple'
              },{
                  id:2,
                  name:'orange'
              },{
                  id:3,
                  name:'banana'
              }]

            }

        }
        var vm=new Vue(options);
    </script>
</body>

测试

子组件

<template>
  <div>
    <h4>这是子组件</h4>
    
    <slot name="myslot" :data='list'></slot>
  </div>
</template>
 
<script>
  export default {
    name:'Son',
    data(){
      return{
        list:[
          {name:"Tom",age:15},
          {name:"Jim",age:25},
          {name:"Tony",age:13}
        ]
      }
    }
  }
</script>

父组件

<template>
  <div id="app">
   <Main></Main>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>
<script>
import Main from './components/Main.vue'

export default {
  name: 'App',
  components: {
    Main
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>

结果
在这里插入图片描述
结论
获得了子组件slot里面的值

凌寒ᨐ舞

关注

0
点赞
踩
0

收藏

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

在上面的示例中，父组件使用标签包裹了一个标签，并在中定义了一个插槽。在插槽中，使用{{ scope.parentValue }}来显示父组件传递的值。子组件中使用标签来定义插槽，并通过:parentValue="parentValue"将子组件中的parentValue属性传递给插槽。用于表示一个作为带作用域的插槽的元素，它在 2.5.0+ 中被 slot-scope 替代。通过这种方式，父组件可以将数据传递给子组件的插槽，并且子组件可以在中接收和使用这些数据。用于标记往哪个具名插槽中插入子组件内容。
复制链接

扫一扫