Javascript 将数据发送到嵌套自定义输入组件的正确方法

我正在从React迁移到Vue，我很喜欢Vue提供的

v-model

。现在我处于一种情况下，无法找出什么是vue-ish的方式来做这件事

下面是我的组件树的外观：

- FormContainer
  -FormView
    - CustomInput
      - input

我的状态在

FormContainer

中，让我们称之为名称和年龄。我希望避免编写自定义setter方法，因为我通常使用

v-model

，如何将数据向下传递到输入组件

目前我正在做这样的事情：

// in my container
<form-view :name="name" :age="age" />

// in my form view I am doing something like
<custom-input v-model="age"/>
<input v-model="name" />

---

或者类似的东西。如果您需要更多详细信息，请告诉我。

我已经回答了两次这个问题，虽然我的回答有价值，但我认为它们与您的问题不太相符，因此我已将它们删除

从根本上说，您希望事件从元素中“冒泡”，事件发生在拥有数据项的Vue上。Vue事件不会冒泡，但本机事件会冒泡，因此，如果在层次结构的底部生成了本机

输入
事件，则可以在树上的任何组件中捕获它

对于您给出的示例，如果
名称
和
年龄
数据项存在于顶级Vue中，则最外层的组件可以将它们作为支持。这意味着来自组件的任何
update:name
和
update:age
事件都将导致数据项被更新。到目前为止还不错

在
表单视图
组件中，我们有一个本地输入元素。通常，它会发出本机
输入
事件。我们希望这些事件以
update:name
事件的形式出现，因此我们可以这样处理：

 <input :value="name" @input="$emit('update:name', $event.target.value)">

总而言之，我们有两个变量通过组件传递到
input
元素，两个
input
事件处理程序，并且没有计算


newvue({
el:“#应用程序”，
数据：{
名字：“杰瑞”，
年龄:21
},
组成部分：{
formView：{
道具：['age'，'name']，
组成部分：{
自定义输入：{
道具：['value']
}
}
}
}
});

名称：{{Name}
年龄：{{Age}
年龄：
姓名：
我自己对Vue很陌生，但是@符号应该是v-on的快捷方式：-您确定您在这里正确使用了它吗？要将变量向下传递给较低的组件，请使用bind将变量分配给Vue组件中的props变量。看，这只是一个想法，我不是那样用的。我将用我正在做的事情更新我的问题。这看起来会起作用，我会尝试一下并让你知道。一个小的补充。在props中传递对象是通过引用进行的，因此，如果设置了计算setter，则可以直接从此处修改props变量。也许这不是最好的方法，但我认为这可能是一个值得注意的补充。
 <input :value="name" @input="$emit('update:name', $event.target.value)">

<custom-input :value="age" @input.native="$emit('update:age', $event.target.value)">