vue3.x 插槽复习

最新推荐文章于 2024-08-21 20:18:11 发布

爱生活，爱编程

最新推荐文章于 2024-08-21 20:18:11 发布

阅读量1k

点赞数

分类专栏： typescript composition

本文链接：https://blog.csdn.net/qq_15009739/article/details/111143709

版权

本文主要复习了Vue3.x中的插槽用法，详细介绍了如何在组件中使用默认插槽、具名插槽以及作用域插槽，通过实例展示了它们在实际开发中的应用，帮助开发者更好地理解和掌握Vue3.x的插槽特性。

摘要由CSDN通过智能技术生成

vue3.x 插槽复习

child.vue

<template>
       <div>
           <p>hello world</p>
           <slot></slot>
               <p>hello world</p>
           <slot name="header" age = "18" ></slot>
           <button @click = "go" class="btn btn-success">go</button>
       </div>
</template>


<script lang="ts">
import Vue from 'vue'
import {defineComponent} from "vue"
export default defineComponent({
    emits:['haha'],
   setup(prop,context){
       const methods = {
           go(){
               context.emit("haha")
           }
       }
       return {
           ...methods
       }
   } 
})
</script>

<style>

</style>