Question

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

组件通过progress = (int) (((startTime - remainingTime)/startTime) * 100); MyProgressBar.setProgress(progress);（下面的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>更新this.u来说，非常冗长。

是否可以通过<Users>标签进行更新，例如

<Users>

我的问题是我不知道如何提取<Users @numberchanged="u=theValueReturedByUsers"></Users> ，我只能在方法中将其保存为theValueReturedByUsers（在上面的示例中）。 / p>

Answer 1

可通过handler到达有效负载。

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

$event

Answer 2

从功能上讲，您正在寻找使组件具有v-model行为的功能。 Vue provides for that。所以你可以说

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

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

另请参见v-bind.sync与value以外的道具一起使用。

Answer 3

如果只需要处理数据的新值后就不需要处理，则可以使用变量$event来做到这一点（无需在父对象中编写方法），该变量包含返回的值（对象或文字变量）来自子组件：

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

注意不要在您的栏位名称中使用大写字母，例如Users

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

3 个答案: