v-on 指令可以直接修改父级的 data() 属性吗？

Question

我有一个将 Vue 组件作为子组件的应用程序。

组件通过 this.$emit（下面的 numberchnaged）将数据传回父级，由 v-on（或 @）在父级捕获) 指令，依次触发一个方法。

此方法然后更新父项的 data() 属性：

<template>
      (...)
      <Users @numberchanged="doNumCh"></Users>
      (...)
</template>

<script>
(...)
export default {
  components: {
          Users
  },
    data() {
      return {
          u: "hello"
      }
    },
    methods: {
      doNumCh(value) {
          this.u = value
      }
    }
}
</script>

此解决方案有效，但对于仅用 <Users> 发回的内容更新 this.u 来说非常冗长。

有没有办法在 <Users> 标签 中进行更新，比如

<Users @numberchanged="u=theValueReturedByUsers"></Users>

我的问题是我不知道如何提取theValueReturedByUsers，我只能在方法中找到它作为value（在我的上面的例子）。

Answer 1

可通过 $event.

访问负载

对于上面的代码，解决方案因此是

<Users @numberchanged="u=$event"></Users>

Answer 2

您可以这样做（无需在父级中编写方法）使用变量 $event，其中包含从子组件返回的值（对象或文字变量）：

 <users @numberchanged="{u=$event}"></users>

Answer 3

在功能上，您希望组件具有 v-model 行为。 Vueprovides for that。所以你可以说

<template>
      (...)
      <Users v-model="u"></Users>
      (...)
</template>

这是一个整洁的视图，只要您的 Users 组件（旁注：您应该始终 have a hyphen in custom component names）采用 value 参数并且 $emits输入事件。

另请参阅 v-bind.sync 以使用 value 以外的道具。

v-on 指令可以直接修改父级的 data() 属性吗？

Can a v-on directive directly modify a data() property of the parent?

javascript

eventemitter

vue.js

vue-component

vuejs2

v-on 指令可以直接修改父级的 data() 属性 吗？

Can a v-on directive directly modify a data() property of the parent?

javascript

eventemitter

vue.js

vue-component

vuejs2

v-on 指令可以直接修改父级的 data() 属性吗？