vue2升级vue3:单文件组件概述 及常用api
目录
useSlots() 和 useAttrs()
useSlots()
useAttrs()
透传 Attributes
Attributes 继承
对 class 和 style 的合并
v-on 监听器继承
深层组件继承
禁用 Attributes 继承
多根节点的 Attributes 继承
在 JavaScript 中访问透传 Attributes
defineProps() 和 defineEmits()
响应式 Props 解构
defineExpose()
expose
useSlots() 和 useAttrs()
在 <script setup> 使用 slots 和 attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：
<script setup>
import { useSlots, useAttrs } from 'vue'const slots = useSlots()
const attrs = useAttrs()
</script>useSlots 和 useAttrs 是真实的运行时函数，它的返回与 setupContext.slots 和 setupContext.attrs 等价。它们同样也能在普通的组合式 API 中使用。
useSlots()
从 Setup 上下文中返回 slots 对象，其中包含父组件传递的插槽。这些插槽为可调用的函数，返回虚拟 DOM 节点。这是用于 <script setup> 中的，因为在 <script setup> 中无法获取 setup 上下文对象的。
如果使用 TypeScript，建议优先使用 defineSlots()。
useAttrs()
从 Setup 上下文中返回 attrs 对象，其中包含当前组件的透传 attributes。这是用于 <script setup> 中的，因为在 <script setup> 中无法获取 setup 上下文对象的。
透传 Attributes
Attributes 继承
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。
当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 <MyButton> 组件，它的模板长这样：
<!-- <MyButton> 的模板 -->
<button>Click Me</button>一个父组件使用了这个组件，并且传入了 class：
<MyButton class="large" />最后渲染出的 DOM 结果是：
<button class="large">Click Me</button>这里，<MyButton> 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 <MyButton> 的根元素上。
对 class 和 style 的合并
如果一个子组件的根元素已经有了 class 或 style attribute，它会和从父组件上继承的值合并。如果我们将之前的 <MyButton> 组件的模板改成这样：
<!-- <MyButton> 的模板 -->
<button class="btn">Click Me</button>则最后渲染出的 DOM 结果会变成：
<button class="btn large">Click Me</button>v-on 监听器继承
同样的规则也适用于 v-on 事件监听器：
<MyButton @click="onClick" />click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。当原生的 <button> 被点击，会触发父组件的 onClick 方法。同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。
深层组件继承
有些情况下一个组件会在根节点上渲染另一个组件。例如，我们重构一下 <MyButton>，让它在根节点上渲染 <BaseButton>：
<!-- <MyButton/> 的模板，只是渲染另一个组件 -->
<BaseButton />此时 <MyButton> 接收的透传 attribute 会直接继续传给 <BaseButton>。
请注意：
-
透传的 attribute 不会包含
<MyButton>上声明过的 props 或是针对emits声明事件的v-on侦听函数，换句话说，声明过的 props 和侦听函数被<MyButton>“消费”了。 -
透传的 attribute 若符合声明，也可以作为 props 传入
<BaseButton>。
禁用 Attributes 继承
如果你不想要一个组件自动地继承 attribute，你可以在组件选项中设置 inheritAttrs: false。
最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。通过设置 inheritAttrs 选项为 false，你可以完全控制透传进来的 attribute 被如何使用。
这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到。
<span>Fallthrough attribute: {{ $attrs }}</span>这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。
有几点需要注意：
-
和 props 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像
foo-bar这样的一个 attribute 需要通过$attrs['foo-bar']来访问。 -
像
@click这样的一个v-on事件监听器将在此对象下被暴露为一个函数$attrs.onClick。
现在我们要再次使用一下之前小节中的 <MyButton> 组件例子。有时候我们可能为了样式，需要在 <button> 元素外包装一层 <div>：
<div class="btn-wrapper"><button class="btn">Click Me</button>
</div>我们想要所有像 class 和 v-on 监听器这样的透传 attribute 都应用在内部的 <button> 上而不是外层的 <div> 上。我们可以通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实现：
<div class="btn-wrapper"><button class="btn" v-bind="$attrs">Click Me</button>
</div>小提示：没有参数的 v-bind 会将一个对象的所有属性都作为 attribute 应用到目标元素上。
多根节点的 Attributes 继承
和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定，将会抛出一个运行时警告。
<CustomLayout id="custom-layout" @click="changeValue" />如果 <CustomLayout> 有下面这样的多根节点模板，由于 Vue 不知道要将 attribute 透传到哪里，所以会抛出一个警告。
<header>...</header>
<main>...</main>
<footer>...</footer>如果 $attrs 被显式绑定，则不会有警告：
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>在 JavaScript 中访问透传 Attributes
如果需要，你可以通过 $attrs 这个实例属性来访问组件的所有透传 attribute：
export default {created() {console.log(this.$attrs)}
}defineProps() 和 defineEmits()
为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 <script setup> 中可用：
<script setup>
const props = defineProps({foo: String
})const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>-
defineProps和defineEmits都是只能在<script setup>中使用的编译器宏。他们不需要导入，且会随着<script setup>的处理过程一同被编译掉。 -
defineProps接收与props选项相同的值，defineEmits接收与emits选项相同的值。 -
defineProps和defineEmits在选项传入后，会提供恰当的类型推导。 -
传入到
defineProps和defineEmits的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。
响应式 Props 解构
在 Vue 3.5 及以上版本中，从 defineProps 返回值解构出的变量是响应式的。当在同一个 <script setup> 块中的代码访问从 defineProps 解构出的变量时，Vue 的编译器会自动在前面添加 props.。
const { foo } = defineProps(['foo'])watchEffect(() => {// 在 3.5 之前仅运行一次// 在 3.5+ 版本中会在 "foo" prop 改变时重新运行console.log(foo)
})以上编译成以下等效内容：
const props = defineProps(['foo'])watchEffect(() => {// `foo` 由编译器转换为 `props.foo`console.log(props.foo)
})此外，你可以使用 JavaScript 原生的默认值语法声明 props 的默认值。这在使用基于类型的 props 声明时特别有用。
interface Props {msg?: stringlabels?: string[]
}const { msg = 'hello', labels = ['one', 'two'] } = defineProps<Props>()defineExpose()
使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：
<script setup>
import { ref } from 'vue'const a = 1
const b = ref(2)defineExpose({a,b
})
</script>当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
expose
用于声明当组件实例被父组件通过模板引用访问时暴露的公共属性。
类型
interface ComponentOptions {expose?: string[]
}详细信息
默认情况下，当通过 $parent、$root 或模板引用访问时，组件实例将向父组件暴露所有的实例属性。这可能不是我们希望看到的，因为组件很可能拥有一些应保持私有的内部状态或方法，以避免紧耦合。
expose 选项值应当是一个包含要暴露的属性名称字符串的数组。当使用 expose 时，只有显式列出的属性将在组件实例上暴露。
expose 仅影响用户定义的属性——它不会过滤掉内置的组件实例属性。
示例
export default {// 只有 `publicMethod` 在公共实例上可用expose: ['publicMethod'],methods: {publicMethod() {// ...},privateMethod() {// ...}}
}