1.Vue中$emit的用法
2.vue3源码分析——实现props,emit，事件处理等
3.你们都写过哪些印象比较深深刻的bug?
4.Vue 子组件调用父组件的方法
5.vue中$refs, $emit, $on, $once, $off的使用详解
6.[Vue笔记] $emit 与 $event

Vue中$emit的用法

       在Vue中，子组件可以使用$emit方法与父组件进行通信，传递数据。举个例子，子组件通过在html标签中设置属性，源码蔬菜将数据传递给父组件。

       子组件中，可以将父组件传递过来的属性值保存到export default中的props数组中。然后，在子组件的html标签中展示这些值。

       而父组件与子组件的通信逻辑如下：首先，在父组件的script标签中导入子组件，接着在script中使用export default注册并创建组件。在html中使用子组件标签，即可在界面看到子组件内容。

       为了实现与父组件的通信，子组件可以在某个按钮上添加click事件。点击此按钮后，会触发子组件中的methods方法，比如sendMsgToParent函数。在该函数中调用$emit方法，将自定义事件与父组件html中子组件标签的自定义事件对应。这样，父组件就能够接收到子组件传递的数据。

vue3源码分析——实现props,开源网址目录源码emit，事件处理等

       <>

       本期内容聚焦在 Vue 3 中实现 props、emit 以及事件处理的源码分析。为了详细了解这些功能的实现，请先回顾上一期的内容。

       在 Vue 3 的渲染函数中，可以通过 `this` 访问 setup 返回的内容，如 `this.xxx`，以及 `this.$el` 等其他属性。

       在进行测试用例时，需要预先在文档中创建一个 `app` 节点，以模拟实际的 DOM 环境。测试用例将模仿在 HTML 中定义的 `app` 节点。

       接下来，我们深入分析并解决两个具体需求：

       1. 在 `setupStatefulComponent` 函数中创建一个代理对象并绑定到 `instance` 中，当 `setup` 的返回结果为对象时，确保其存在于 `instance` 中，可以通过 `instance.setupState` 访问。

       2. 在 `mountElement` 函数中，当创建节点时，在 `vnode` 中绑定 `el`。同时，在 `setupStatefulComponent` 中的代理对象中判断当前的 `key`，确保在执行时已正确绑定 `el`。

       分析发现，`mountElement` 的定制网站和源码执行顺序可能导致问题，即在 `setupStatefulComponent` 执行时 `vnode.el` 未赋值，导致后续操作失败。实际上，`render` 函数返回的 `subtree` 是一个 `vnode`，在 `patch` 后执行相关操作，可以解决这个问题。

       至此，测试用例可顺利通过。

       接下来，我们将探讨 Vue 中如何使用 `onEvent` 实现事件注册，以及其背后的实现逻辑。

       在 Vue 3 中，`onEvent` 提供了一种简洁的事件绑定方式。测试用例分析发现，关键在于处理 prop，判断属性是否符合特定格式，进而进行事件注册。通过在传入的 `el` 中添加一个属性 `el._vei` 来实现事件缓存。

       实现过程中，事件处理逻辑得到完善，确保了功能的正确实现。

       在 Vue 3 中，实现父子组件通信主要涉及 props 与 emit 的使用。通过分析测试用例，我们解决了以下问题：

       1. 在子组件的运行贷款源码 `setup` 函数中使用 props 需要明确传入组件的 `props`。

       2. 在 `render` 中访问 `this` 的 `props` 需要在代理对象中添加相应的判断。

       3. 处理 `emit` 的异常情况，如报错，通过使用 `shallowReadonly` 包裹以确保只能读取。

       对于 `emit` 的实现，关键在于正确传入参数以及处理事件名的格式转换。问题得到解决后，测试用例运行顺畅。

       至此，我们完成了 Vue 3 中 props、emit 及事件处理的源码分析与实现。通过深入理解 Vue 3 的组件系统，我们能够更高效地构建具有交互性的前端应用。

你们都写过哪些印象比较深深刻的bug?

       探索Vue组件中的神秘bug，一段看似简单的代码却隐藏着谜团：this.$emit('updata:name', 'value')。这句代码的作用显而易见，更新name的值为value。然而，当我们传入值1，却发现name的值变成了2，这违背了常理。按照计算机逻辑，我们难以找到问题所在。

       尝试理解这并非一蹴而就。解决大部分bug时，源码100001的补码我们往往依赖于逻辑思维，但在这次事件中，我们被迫跳出常规思维框架。通过反复审视代码，尝试从不同角度理解，我们勉强找到了一些端倪。问题可能出在name的值并未参与到页面的动态计算中，这是一个关键点。但更深层次的bug原因，我们仍未能彻底解开。

       幸运的是，问题最终被解决。我们在updata后，通过直接赋值来确保name的值被正确更新。虽然这一步操作看似无理，但基于对bug现象的理解，它成为了问题解决的关键。我们加入这一步骤，是因为在某个判断分支上，updata的值似乎并无实际意义。这或许可以解释为何直接赋值成为了必要的步骤。

       回顾整个经历，我们发现解决bug并非单纯依赖逻辑思维，有时还需跳出常规框架，从全新的角度思考问题。这次经历提醒我们，理解代码与实现预期结果之间，可能存在着微妙的联系。在寻找bug的过程中，每一步尝试都可能带来新的启示。通过这次探索，我们不仅解决了眼前的困惑，也拓宽了处理类似问题的方法论。

Vue 子组件调用父组件的方法

       本文将介绍如何在Vue中实现子组件调用父组件的方法，主要涉及三种方式。首先，子组件可以通过使用this.$emit('xxx')来触发事件，然后在父组件中监听并调用相应方法。其次，父组件可以将方法名传给子组件，在子组件内部执行。最后，子组件可以通过this.$parent.xxx的方式调用父组件方法，但需确保方法在父组件中已定义。具体实现如下：

       对于第一种方式，子组件通过this.$emit('xxx')触发事件，父组件监听并调用方法。代码示例如下：

       子组件代码：

       在子组件内部调用方法：

       使用this.$emit('xxx')触发事件，父组件监听并调用。

       父组件代码：

       在父组件监听事件并调用子组件方法。

       第二种方式中，父组件将方法名传递给子组件，子组件内部执行。示例代码如下：

       子组件代码：

       接收方法名并执行。

       父组件代码：

       传递方法名至子组件。

       对于第三种方式，子组件通过this.$parent.xxx调用父组件方法，前提为方法已在父组件定义。具体实现如下：

       子组件代码：

       使用this.$parent.xxx调用父组件方法。

       通过上述三种方法，子组件能够灵活调用父组件中的方法。其中，第一种方法在路由使用时可简化代码结构。请确保在使用路由场景下适当调整代码。如有疑问或发现不当之处，请随时告知，感谢您的阅读与支持。

vue中$refs, $emit, $on, $once, $off的使用详解

       çˆ¶ç»„件调用子组件的方法，可以传递数据。

        父组件：

        子组件：

        子组件调用父组件的方法并传递数据。

        子组件：

        父组件：

        兄弟组件之间相互传递数据。

        首先创建一个vue的空白实例（兄弟组件的桥梁）

        子组件a:发送放使用$emit自定义事件把数据带过去。

        子组件b:接收方通过$on监听自定义事件的callback接收数据

        父组件：

        监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

        将on变成once，即只执行一次。

        移除自定义事件监听器，语法：vm.$off( [event, callback] )

        如果没有提供参数，则移除所有的事件监听器；（注意这条，一般在main.js中，移除所有事件绑定）

        如果只提供了事件，则移除该事件所有的监听器；

        如果同时提供了事件与回调，则只移除这个回调的监听器。

[Vue笔记] $emit 与 $event

       $emit 是子组件向父组件传递通信的方式。在 Vue 中，我们使用 props 来接收和传递数据，而 $emit 则用于触发事件并附带数据参数。例如，若要向父组件传递字符串 "world"，则在子组件中使用 $emit('event', 'world')。这允许子组件在触发特定事件时与父组件进行交互。

       在组件化开发中，我们倾向于将复用的 HTML 代码封装成组件，以提高代码的组织性和重用性。例如，将一个按钮组件命名为 myButton，并在父组件中使用它。若直接将此按钮组件作为普通元素使用，则可以通过为其添加事件监听器来与按钮进行交互。然而，当按钮被封装为组件后，我们便需要使用 $emit 来传达事件和相关数据给父组件。

       例如，如果我们想要在点击 myButton 组件时，父组件能够接收到一个事件和参数，我们可以使用如下形式：this.$emit('Iam-clicked', "hello")。这样，父组件的 handler 函数可以接收该事件及其参数。

       $emit 的灵活性还体现在它可以传递多个参数。当需要向父组件传递多个值时，可以将这些值封装为一个数组或对象，并使用 $emit 进行传递。例如，$emit('Iam-clicked', ['hello world', 'holy shit']) 或 $emit('Iam-clicked', { hello: 'world', holy: 'shite'})。这使得父组件可以接收并处理这些参数，从而实现更复杂的事件处理逻辑。

       在处理事件传递时，有时会遇到将事件参数与外部变量相结合的需求。例如，当需要在事件处理函数中访问 v-for 循环中的索引时。可以通过定义全局变量并将其与事件参数结合，从而在处理函数中访问索引信息。例如，使用全局变量 global_storage 保存事件参数，然后在 handler 函数中通过索引与 global_storage 结合进行处理，如 @Iam-clicked="handler(index, global_storage)"。

       通过这种方式，我们可以更灵活地处理组件间的通信，并且能够根据具体需求定制事件处理逻辑。这使得 Vue 的组件化开发变得更加高效且易于维护。

vue如何通过子组件方法改变父组件的值?

       在 Vue.js 中，子组件可以通过事件传递来改变父组件的值。子组件调用 `this.$emit` 方法，向父组件传递一个自定义事件和参数，形式为 `this.$emit('自定义事件名', 参数)`。父组件则通过监听事件，捕获并处理子组件传递的值。

       具体操作如下：

       首先，在子组件的方法中，使用 `this.$emit` 发送事件，将需要传递的值作为参数。例如：

       javascript

       methods: {

        sendValueToParent(value) {

        this.$emit('传值事件', value);

        },

       }

       这里的 `传值事件` 是自定义事件名，可以根据需要自行定义。

       接着，在父组件中，通过 `v-on` 或简写 `@` 来监听子组件的事件，并在事件处理函数中接收到子组件传递的值。

       发送值

       在这个示例中，`` 是子组件的标签，`@传值事件="handleChildEvent"` 表示监听子组件的 `传值事件` 事件，并将事件处理函数 `handleChildEvent` 作为回调函数。当子组件触发事件时，父组件的事件处理函数会被调用，从而接收到子组件传递过来的值。

       通过这种方式，子组件可以轻松地与父组件进行通信，实现状态的传递和共享，使得组件间的协作更加灵活和高效。这种方法不仅适用于简单的状态传递，还可以在更复杂的多级组件结构中发挥作用。