vue3 自定义显示内容

• 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> 

参考文档

• https://blog.csdn.net/qq_39335404/article/details/128976649