vue3 ...收起展开

最新推荐文章于 2025-05-12 15:35:27 发布

_大菜鸟_

最新推荐文章于 2025-05-12 15:35:27 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46463643/article/details/125478024

本文通过实例代码介绍了Vue3中如何进行组件的封装和在父组件中调用这些组件，帮助开发者理解Vue3的组件化开发流程。

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

效果图
在这里插入图片描述

封装子组建

<template>
  <div ref="textOverflow" class="text-overflow" :style="boxStyle">
    <span ref="overEllipsis">{
  
  { realText }}</span>
    <span class="slot-box" ref="slotRef" v-if="showSlotNode">
      <slot :click-toggle="toggle" :expanded="expanded"></slot>
    </span>
  </div>
</template>

<script lang="ts">
import {
     
      computed, defineComponent, onMounted, ref, nextTick } from 'vue'

export default defineComponent({
     
     
  name: "CommonContent",
  props: {
     
     
    text: {
     
     
      type: String,
      required: true
    },