Vue的prop的几个问题

Question

如图，这个例子。

• 就是prop不是接收父组件的值吗，那v-bind:value不应该写在<currency-input ></currency-input>里吗

<currency-input  v-bind:value="value"></currency-input>

• 最后一句好像删掉也没影响。。请问作用是什么

   this.$emit('input', Number(formattedValue))

• 2.再弱弱的问一句，这个例子的父组件和子组件分别是谁，有点乱

Answer 1

// currency-input是子组件。外层是父组件。
<currency-input v-model="price"></currency-input>
// 这里的v-model是语法糖，其实就是：
<currency-input v-bind:value="price" @input="input"></currency-input>
// 你打红框的是从父组件传递过去的price值。
this.$emit('input', Number(formattedValue))
// 这句是把结果值传递回父组件，供父组件使用。

// 比如父组件长这样：
<div>
    组件
    <currency-input v-model="price"></currency-input>
</div>
new Vue({
    data:{},
    methods:{},
});

建议多看几次，Vue文档：自定义事件
并动手实践。

Answer 2

1、在这个例子中currency-input是组件，其内没有子组件。

2、<currency-input v-model="price"></currency-input>
等价于
<currency-input v-bind:value="price"></currency-input>
至于 template 里的<input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)">
等价于
<input ref="input" v-model="value" v-on:input="updateValue($event.target.value)">

3、this.$emit('input', Number(formattedValue))
是用于传值给currency-input的上层组件。
因为这里的v-model不像input的v-model那样可以双向绑定，这里的v-model只是个语法糖，是作为值传递的，所以需要：

在有新的值时触发 input 事件并将新值作为参数

在这里 vue 在背后帮我们做了处理更新了value，而不需要我们v-on来接受 input 事件后再去改变value值。