使用vue開發輸入型組件更好的一種解決方式(子組件向父組件傳值,基於2.2.0)

（本人想封裝一個帶有input輸入框的組件）

之前使用vue開發組件的時候，在遇到子組件向父組件傳遞值時我采用的方法是這樣的： 

比如子組件是一個輸入框，父組件調用時需要獲取到子組件輸入的值,子組件通過watch監聽輸入框的值然后通過this.$emit給父組件，再在父組件v-on綁定相應方法獲取到從子組件傳入的值，再將傳入的值給對應的data:

childInput.vue:
<template> <input type="text" v-model="inputValue"> </template> <script> export default{ data() { return{inputValue: null} }, watch:{ inputValue(val){ this.$emit('getValue', val) } } } </script> parent.vue: <template> <div> <child-input v-on:getValue="(val)=>{someValue = val}"/> </div> </template> <script> export default{ data(){ someValue: null } } </script>

這樣的解決方式感覺有點蠢，因為這樣寫每次我調用子組件的時候都會需要寫一個v-on:getValue然后將相應的值賦給對應的data數據，比如在寫嵌套組件的時候，一般一個Input組件包含多個input類型，然后在form表單調用的時候可能會調用10個以上的input子組件，就意味着需要些10多個的v-on:xxx=”(val)=>{yyy = val}”。

然而今天在瀏覽官網時發現了另外一個解決方法：

相對於上述的老辦法倒是方便了許多，不過這種方法只有在vue 2.2.0以上才可以使用(根據官網的說法)：

parent.vue:
<template> <div> <child-input v-model="someValue"/> </div> </template> <script> export default{ data(){ someValue: null } } </script> childInput.vue: <template> <span> <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" > </span> </template> <script> export default{ data() { return { inputValue: null,//輸入框的值 } }, methods: { updateValue(val) { this.$emit('input', val) } } } </script>

這樣寫每次調用子組件只用像一般的元素寫v-model雙向綁定數據即可。