imkaifan的博客

vue2表现：“hello world”、 “hello vue3”均会显示。vue3表现：仅“hello world”均会显示。

。如果这个组件接收一个 id attribute 和一个 v-on:close 监听器，那么 $attrs 对象现在将如下所示:需要删除所有的 $listeners 用法（vue2切换vue3的时候）如何进行改造1. 直接使用 v-on 绑定具体的事件在 Vue 3 中，可以直接在子组件上使用 v-on 绑定具体的事件，而不是使用 $listeners。这种方式更明确，也更符合 Vue 3 的设计哲学。2. 使用 emits 选项声明事件Vue 3 引入了 emits 选项，用于。这有助于类

【代码】$set 方法废弃。

在。在 Vue 2 中，.native 修饰符用于在组件的根元素上监听原生 DOM 事件，但在 Vue 3 中，这一行为发生了变化。。因此，你不再需要使用 .native 修饰符来监听原生事件。。在这种情况下，@click 会被视为自定义事件，而不是原生事件。inheritAttrs: false 的影响：如果子组件中设置了 inheritAttrs: false，则父组件传递的事件监听器不会自动绑定到子组件的根元素上。

记得this.$router.push的时候序列化一下，否则你拿到的可能是 “[object Object]”2、参数复杂–query方式传参。1、参数简单的话就这样改。

你需要一个轻量级的事件总线，可以自己封装一个 EventBus 类，也有一些替代方案。

Vue 3 中 :deep() 的用法。:deep() 是一个伪类，用于在<style scoped> 中穿透子组件的作用域。::v-deep 是一个用于深度选择器的伪元素，用于在<style scoped> 中穿透组件的作用域，修改子组件的样式。它的语法是将选择器包裹在 :deep() 中，例如 :deep(.class)

虽然你可以同时使用这两种风格，但建议在单个组件中保持一致性，以避免代码风格混乱。，因为 Vue 3 的设计目标之一就是允许开发者根据需要选择合适的 API 风格来编写代码。在 Vue 3 中，

在Vue3中，​slot-scope​​ 已被废弃，取而代之的是新的 ​​v-slot​​ 语法。虽然 ​​slot-scope​​ 在 Vue2 中用于定义作用域插槽，但在 Vue3 中，推荐使用 ​​v-slot​​ 进行插槽的定义和使用。Vue 3 引入了一种更统一的插槽语法，移除了 Vue 2 中的具名插槽语法 (slot=“name”)，改为使用 v-slot 指令。slot=“empty” 这个写法是 Vue 2 中的具名插槽语法，用户可能在某个父组件中通过这个语法向子组件的特定插槽传递内容。

你可以在组件中使用 emits 选项来声明可以触发的事件。