vue的v-slot指令使用总结

最新推荐文章于 2025-06-09 09:57:33 发布

原创最新推荐文章于 2025-06-09 09:57:33 发布 · 4.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

38 篇文章

订阅专栏

博客介绍了Vue中父组件使用v - slot插槽的相关内容。在父组件定义v - slot插槽，可将定义的模块渲染到子组件。若父组件展示数据，需在data中写入属性数据，且属性名要与v - slot中的名称相同，还给出了修改后的代码。

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

父组件代码：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    
    <slotdemo> 
      <template v-slot:a>
          this is a 
      </template>
      asdad
    </slotdemo>
   
  </div>
</template>

<script>

import slotdemo from './components/slotDemo.vue'

export default {
  name: 'app',
  components: {
    slotdemo
  },
}
</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>

子组件代码

<template >
    <div >
        {{ user.firstName }}

        <slot name="a">
        </slot>
    </div>
     
</template> 
<script>
export default {
    name:'slotdemo',
    data() {
        return {
            user:{
                firstName:'zzz',
            }
        }
    },
}
</script>

实现效果

在父组件定义v-slot插槽，可以将父组件定义的模块渲染到子组件，如果父组件需要去展示一些数据需要在父组件的data中写入属性的数据，但是属性名必须与v-slot中的名称相同

以下是在原有基础上修改的代码：

 <slotdemo> 
  
      <template v-slot:a>
          this is a 
          {{a.name}}//新增
      </template>
    </slotdemo>

data() {
    return {
      a:{
        name:'123',
      }
    }
  },