当前位置：首页 > news >正文

vue3 自定义显示内容

news 2025/8/7 3:15:08

vue3 自定义显示内容
- vue3 自定义显示内容示例
- uni-app封装自定义内容组件

vue3 自定义显示内容

在 Vue 3 中，你可以通过插槽（Slot）来自定义组件的显示内容。

插槽允许你将额外的内容插入到组件的特定位置，从而实现更灵活的组件定制化。

下面是一个简单的示例，演示如何在 Vue 3 中使用插槽自定义组件的显示内容：

<template><div><MyComponent><!-- 自定义内容插槽 --><template #custom-content><p>这是自定义的内容</p><button @click="handleButtonClick">点击按钮</button></template></MyComponent></div>
</template><script>
import { defineComponent } from 'vue';export default defineComponent({methods: {handleButtonClick() {console.log('按钮被点击');},},
});
</script>

在上述示例中，我们创建了一个名为 MyComponent 的组件，并在组件内部定义了一个插槽。

在使用 MyComponent 组件的地方，我们可以通过 template 标签和 #custom-content 来指定插槽的位置。

在这个插槽中，我们放置了一些自定义的内容，包括一个 <p> 标签和一个按钮。

通过这种方式，你可以根据需求在不同的场景中插入不同的内容，从而实现组件的高度定制化。

在组件内部，你可以使用this.$slots来访问插槽，并根据需要进行处理。

需要注意的是，在 Vue 3 中，插槽的写法发生了一些改变，使用了 template 标签和 # 符号来定义和引用插槽。

具体的语法细节可以参考 Vue 3 的官方文档。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

vue3 自定义显示内容示例

当你想要在 Vue 3 中自定义组件的显示内容时，可以使用插槽 (slot) 来实现。

下面是一个示例，演示如何在 Vue 3 中使用插槽来自定义组件的显示内容：

<template><div><MyComponent><!-- 默认插槽 --><template #default><p>这是默认的内容</p></template><!-- 自定义插槽 --><template #custom><p>这是自定义的内容</p><button @click="handleButtonClick">点击按钮</button></template></MyComponent></div>
</template><script>
import { defineComponent } from 'vue';export default defineComponent({methods: {handleButtonClick() {console.log('按钮被点击');},},
});
</script>

在上述示例中，我们创建了一个名为 MyComponent 的组件，并在组件内部定义了两个插槽：default 和 custom。

在使用 MyComponent 组件的地方，我们可以通过 template 标签和 # 符号来指定插槽的位置，并在插槽中放置相应的内容。

在本示例中，default 插槽展示了默认的内容，而 custom 插槽展示了自定义的内容，包含了一个 <p> 标签和一个按钮。

你可以根据具体需求将需要展示的内容放置在相应的插槽中，达到自定义显示内容的效果。

在组件内部，可以使用 $slots 访问插槽，并根据需要进行处理。例如，可以在组件中使用 this.$slots.default 来访问 default 插槽的内容。

记得在定义组件时，通过 defineComponent 函数来创建组件对象，并根据需要编写相应的逻辑和方法。

这是一个基本示例，你可以根据具体需求和场景，进一步扩展和调整插槽的使用。

Vue 3 的文档中有更多关于插槽的详细说明和示例，你可以参考官方文档以获取更多信息。

uni-app封装自定义内容组件

编写组件

/components/u-masrk/u-masrk.vue

<template><view class="mask"><view class="dialog-container"><header class="dialog-header"><slot name="header"></slot></header><main class="dialog-content"><slot></slot></main><footer class="dialog-footer"><slot name="footer"></slot></footer></view></view>
</template><script setup>import {ref} from 'vue' 
</script>

引用组件

/pages/index/index.vue

<template><view class="container"> <uMarsk><template v-slot:header><view>选择身份</view></template><template v-slot><view class="interest-list"><uni-tag class="interest-tag" v-for="item in interestList" :key="item.id" :text="item.label"type="primary" size="normal" @click="selectInterest(item)" /></view></template><template v-slot:footer></template></uMarsk></view>  
</template><script setup> 
import uMarsk from "@/components/u-masrk/u-masrk.vue" 
</script>