vue如何实现选项卡,vue实例选项,vue3项目,vue3新增功能,vue3ui,vue写选项卡
Vue 3.0 的选项杂项是指在 Vue 组件中可以使用的一些额外的选项，这些选项不同于常规的组件选项（例如 data、methods、computed 等），它们提供了更多的灵活性和功能。

以下是几个常见的选项杂项及其相应的解释和例子：

1. setup
- 解释：setup 是 Vue 3.0 中引入的一个新选项，用于设置组件的初始状态。它接收两个参数：props 和 ctx，分别代表组件的属性和上下文环境。
- 例子：


<template>
<div>{{ count }}</div>
</template>

<script>
export default {
setup(props) {
// 初始化状态
const count = Vue.ref(0)

// 定义方法
function increment() {
count.value++
}

return { count, increment }
}
}
</script>


2. beforeCreate / created / beforeMount / mounted / beforeUpdate / updated / beforeUnmount / unmounted
- 解释：这些选项对应着组件的生命周期钩子函数，分别在不同的阶段执行。例如，beforeCreate 在创建组件实例之前执行，mounted 在组件挂载到 DOM 后执行。
- 例子：


export default {
beforeCreate() {
console.log('组件实例创建之前执行')
},

mounted() {
console.log('组件挂载到 DOM 后执行')
}
}


3. inheritAttrs
- 解释：inheritAttrs 用于控制组件是否继承父级元素的非 props 属性。默认情况下，Vue 组件会自动继承父级元素的所有属性。
- 例子：


<my-component class="test">
<div id="test">hello world</div>
</my-component>

<script>
export default {
inheritAttrs: false
}
</script>


在上面的例子中，my-component 组件不再继承父级元素的 class 和 id 属性。

4. emits
- 解释：emits 定义了组件可以触发的事件列表。当组件触发一个未在 emits 中定义的事件时，Vue 会在开发环境下给出警告。
- 例子：


<template>
<button @click="increment">{{ count }}</button>
</template>

<script>
export default {
emits: ['increment'],

setup(props, { emit }) {
const count = Vue.ref(0)

function increment() {
count.value++
emit('increment')
}

return { count, increment }
}
}
</script>


在上面的例子中，emits 中定义了 increment 事件，当按钮被点击时会触发该事件，并调用 emit 方法向父组件发送事件。