为啥Vue会更新父级中的变量-未使用事件

Posted 2023-02-23

【中文标题】为啥Vue会更新父级中的变量-未使用事件

【英文标题】：Why does Vue update variable in parent - no event used为什么Vue会更新父级中的变量-未使用事件

【发布时间】：2021-11-10 20:48:24

【问题描述】：

根据Vue.js docs（组件：单向数据流）我假设我无法从子组件更新父变量。

怎么可能，当我将一个变量绑定到子组件时，它会被更新而不发出任何事件？

这里是Vue SFC playground example。

如何在子组件中使用变量的副本而不将更改传播到父组件？

编辑：我很好奇为什么 AccountPage.vue 中的属性 userAccount 会更新。

没有 v-model，没有提交事件，但它仍在更新。

【参考方案1】：

该示例演示了v-model 的用法，如docs 中所述

自定义事件也可用于创建自定义输入 v 模型。请记住：

<input v-model="searchText">

做同样的事情：

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">

意味着它确实触发了一个事件

【讨论】：

组件上没有v-model或者双向绑定。

查看 AccountForm.vue 上的第 7 行（第 3 个选项卡）

再次阅读我的评论。组件上没有 v-model。

正如@tauzN 评论的那样，您正在寻找错误的组件。 AccountForm.vue 是一个子组件，我很好奇为什么父变量会更新。 parent 中没有使用 v-model。

【参考方案2】：

编辑： 在 AccountForm.Vue 中，在编写时会创建一个反应性且可变的 ref 对象

 const userAccount = ref (..) 

更改响应式对象会影响父级。如果您删除 ref()，您会看到父级没有更新。

https://v3.vuejs.org/api/refs-api.html#ref

旧答案： 当你使用 v-model 时，你创建了一个双向数据绑定。 v-model 是 v-bind 和 input 的简写，即通过 v-bind 将数据绑定到 child，并通过 child 发出的 input 事件接​​收数据。

所以，

<input v-model="searchText">

和写一样

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

【讨论】：

组件上没有v-model或者双向绑定。

AccountForm.Vue 中没有 吗？

当然。但是数据来自不是 v-model 的父级的道具。