Vue:父子组件传值props、sync、v-model

在vue中父子组件中传值

示例中：

1. 父组件Father向子组件Son传值（num：100）

2. 子组件Son点击修改按钮，需要修改接收父组件的传值，vue是单向数据流不允许直接修改接收的值。因此通知父组件Father去修改num值。 props单向数据流

1. 父子组件props传值：

父组件：

子组件：

2. 父子组件传值 .sync修饰符：

上面的案例对prop（num）进行“双向绑定”。 因此推荐以 update:myPropName的模式触发事件取而代之。.sync修饰符

父组件：

子组件：

用.sync简写：

把上述示例中


修改为

3. v-model组件传值

使用v-model进行组件传值，默认会利用名为 value 的 prop 和名为 input 的事件。

因此我们将第一个示例修改需要传值value，监听input事件即可：

代码如下：

父组件：

子组件：

用v-model代码如下：

把上述示例中


修改为