vue3 第二十二节（defineOptions用途）

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

引言：

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

可以通过

javascript 复制代码

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

用法

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

javascript 复制代码

<template>
<script>
  export default {
    name: 'myOptionCom'
  }
</script>

<script setup>
  // setup 语法糖中没有 name 属性
</script>
</template>

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

javascript 复制代码

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

完整示例：父组件

javascript 复制代码

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

javascript 复制代码

子组件
<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 进行处理；为什么不是想要式的呢？？

比如：

javascript 复制代码

<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() 来获取透传的属性方法

javascript 复制代码

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

关于：Attributes 详情可以查看组件之间通讯