vue的插槽

最新推荐文章于 2025-05-19 20:38:29 发布

xinguan1267

最新推荐文章于 2025-05-19 20:38:29 发布

阅读量107

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/xinguan1267/article/details/130944748

版权

文章详细介绍了Vue中如何使用插槽进行内容分发，以及插槽的作用域规则。在子组件中定义插槽，父组件可以提供内容，但不能直接访问子组件的数据。示例展示了如何在父组件模板中通过v-slot访问插槽属性，并动态渲染列表。同时，文章强调了每个模板表达式只能访问其所在组件的作用域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件挖坑：<slot> 元素是一个插槽出口

父组件中萝卜：父元素提供的插槽内容 (slot content) 将在哪里被渲染

作用域：

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域

父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

插槽使用子组件的数据

子组件：

父组件

<MyComponent v-slot="slotProps"> {{ slotProps.text }} {{ slotProps.count }} </MyComponent>

App.vue

<script>
// 第一步 引入组件
import Content from './components/Content.vue'
export default {
  data() {
    return {
      message: 'helloworld'
    }
  },
  //  第二步 组件暴露给模板 进行注册
  components: {
    Content
  },

}
</script>
<template>
  <Content><button>测试slot</button></Content>
  <Content><input type="text" /></Content>
  <Content><button>测试slot</button><input type="text" /></Content>


  <!-- v-slot 只能添加在template上 -->
  <!-- 父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域 -->
  <Content>
    <!-- <template v-slot:button>
      <button>测试slot{{ message }}</button>
    </template>
    <template v-slot:input>
      <input type="text" v-model="message" />
    </template>
    <template v-slot:h2 v-slot:default="slotPrors">
      <h2>{{slotPrors.list}}</h2>
    </template> -->
    <template  v-slot:test="slotProps" >
      <ul>
        <li v-for="item in slotProps.list" :key="item">{{item}}</li>
      </ul>
      <!-- <h2>{{slotPrors.list}}</h2> -->
    </template>
  </Content>
  <Content>
    <template v-slot:test="slotProps">
      <ol>
        <li v-for="item in slotProps.list" :key="item">{{ item }}</li>
      </ol>

    </template>
  </Content>
</template>

Content.vue

<template>
    <h2>我是content组件 子组件message：{{ message }}</h2>
    <div>
        <!-- 备用内容没有提供内容时，默认渲染 -->
        <!-- <slot name="button"><button>默认按钮</button></slot>
        <slot name="input"></slot>
        <slot name="h2" :list="list"></slot> -->
        <slot :list="list" name="test">
        </slot> 
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: '你好',
            list:[12,32,43,3]
        }
    }
}
</script>