vue插槽，具名插槽、作用域插槽

最新推荐文章于 2023-02-04 23:31:15 发布

原创最新推荐文章于 2023-02-04 23:31:15 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文详细介绍了Vue中具名插槽（用于传递自定义内容）和作用域插槽（获取组件内部数据）的使用方法，通过实例演示了如何在父子组件间灵活传递和操作数据。

vue插槽

1、具名插槽

具有名字的插槽，使用的时候可以根据名字插入到具体要插入的组件中的相应位置

//子组件(Son)
<div>
  <p>这是该组件固定的内容</p>
   //留给引用此组件，想要添加自己内容的
  <v-slot name='title'></slot>
</div>

//父组件
<Son>
    <template v-slot='title'>
        //v-slot可以简写为#,#title
        //往该组件添加我想加的内容
        <h1>我添加的title为：具名插槽的使用</h1>
    </template>
</Son>

2、作用域插槽

可以拿到封装组件时绑定的数据，数据类型是一个对象{}

//子组件
<template>
  <div>
    <p>我是Artical组件</p>
    //在封装组件时，为预留的<slot>提供属性对应的值，这种做法，叫做“作用域插槽”
    <slot name="title" :user="userList"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: {
        name: "张三",
        age: 22,
        sex: "男",
      },
    };
  },
};
</script>

//父组件
<script>
// 引入组件
import Artical from "./components/Artical.vue";

export default {
  name: "App",
  components: {
    Artical
  }
</script>
  
  
<template>
  <div id="app">
    <Artical>
      <template #title="scope">
        <p>{{ scope }}</p>
      </template>
    </Artical>
  </div>
</template>
结果：{ "user": { "name": "张三", "age": 22, "sex": "男" } }

<template>
  <div id="app">
    <Artical>
      <template #title="scope">
        <p>{{ scope.user }}</p>
      </template>
    </Artical>
  </div>
</template>
结果：{ "name": "张三", "age": 22, "sex": "男" }

<template>
  <div id="app">
    <Artical>
      <template #title="scope">
        <p>{{ scope.user.name }}</p>
      </template>
    </Artical>
  </div>
</template>
结果：张三