vue3第二十二节（defineOptions用途）

本文主要是介绍vue3第二十二节（defineOptions用途），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

defineOptions()
3.3 版本以上才可以使用

引言：

在使用组件时候
默认情况下，父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被**“透传”**。这意味着当我们有 一个单根节点(多根节点的是无法透传的) 的子组件时，这些绑定会被作为一个常规的 HTML attribute 应用在子组件的根节点元素上。
当你编写的组件想要在一个目标元素或其他组件外面包一层时，可能并不期望这样的行为。我们可以通过设置 inheritAttrs 为 false 来禁用这个默认行为。这些 attributes 可以通过 $attrs 这个实例属性来访问，并且可以通过 v-bind 来显式绑定在一个非根节点的元素上。
$attrs中包含非 props 和 emits 的所有属性，包括clas style v-on等

可以通过

defineOptions({inheritAttrs: false // 设置不让透传
})

用法

在vue3.3版本之前，如果我们写的组件需要声明 name 属性方便调试时，则我们声明的单文件组件的名称就是文件的名称；
如果我们想要更改这个名称需要单独写一个script标签；
或者我们在写递归组件时候，需要使用组件的name属性进行递归调用时候；
如下：

<template>
<script>export default {name: 'myOptionCom'}
</script><script setup>// setup 语法糖中没有 name 属性
</script>
</template>

而在 vue3.3 之后，我们可以这样使用，不需要再额外写选项式api 语法

<template>
<script setup>defineOptions({name: 'MyComponent',inheritAttrs: false})
</script>
</template>

完整示例：
父组件

<template>
<div class="my-options">This is defineOptions demo.<OptionsChild :num="num" :age="age" :changeNum="changeNum"></OptionsChild>
</div>
</template>
<script setup>
import OptionsChild from './components/optionsChild.vue'
import { ref } from 'vue'
const num = ref(5)
const age = ref(18)
</script>

子组件
<template>
<div class="options-child">子组件props-num--{{ num}}<hr></hr>// 注意：递归组件一定要有 结束递归 条件，不然会进入死循环，导致内存溢出<div v-if="num > 2"><myOpCom :num="num"></myOpCom></div>
</div>
</template>
<script setup>import { ref } from 'vue'const props = defineProps({num: {type: String,default: ''}})defineOptions({name: 'myOptionCom', // 使用name 递归，而不是之前的文件名 进行递归调用inheritAttrs: true // 默认继承透传 父组件中没有 被 props 声明的属性；当设置为false 时 age属性不会显示在子组件的 attributes 中})const num = ref(props.num - 1)console.log('==点击了=l', num)
</script>

注意：
和 props 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 foo-bar 这样的一个 attribute 需要通过 $attrs['foo-bar'] 来访问。
像 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick。

虽然 attrs 的属性总是最新的，但是他是非响应式的，无法通过 watch 去监听其变化，若想要是响应式的，建议使用props | emits 进行处理；
为什么不是想要式的呢？？

比如：

<template>
<div class="my-options" >This is defineOptions demo.<OptionsChild :num="num" :age="age" :changeNum="changeNum"></OptionsChild>
</div>
</template>
<script setup>
import OptionsChild from './components/optionsChild.vue'
import { ref } from 'vue'
const num = ref(5)
const age = ref(18)
const changeNum = () => {console.log('changeNum===')
}
</script>

子组件中：可以使用 useAttrs() 来获取透传的属性方法

<template>
<div class="options-child">子组件props-num--{{ num}}<hr></hr>
</div>
</template>
<script setup>import { ref, useAttrs } from 'vue'const props = defineProps({num: {type: String,default: ''}})defineOptions({name: 'myOptionCom', // 使用name 递归，而不是之前的文件名 进行递归调用inheritAttrs: true // 默认继承透传 父组件中没有 被 props 声明的属性；当设置为false 时 age属性不会显示在子组件的 attributes 中})console.log('==点击了=l', num, attrs)const attrs = useAttrs()attrs.changeNum() // 直接调用 可以通过 useAttrs() 直接调用透传属性、方法console.log("---", attrs.age) // 18
</script>