vue中v-model父子組件通信

有這樣的需求，父組件綁定v-model，子組件輸入更改父組件v-model綁定的數值。是怎么實現的呢？

實際上v-model 只是語法糖而已。

<input v-model="inputValue" />
<input v-bind:value="inputValue" v-on:input="inputValue= $event.target.value" />

實際上他們是一樣的。

舉個例子，父組件代碼：

<template>
 <div id="demo">
  <test-model v-model="inputValue"></test-model>
  <span>{{inputValue}}</span>
</div>
</template>
<script>
    import testModel from 'src/components/testModel'
    export default {
      data(){
            return{
                 inputValue: "inputValue"
            }
        },
        components: {
            testModel,
        }
    }
</script>

<style lang="scss" scoped>
</style>

子組件代碼如下：

<template>
<span>
      <input
        ref="input"
        :value="value"
        @input="$emit('ababab', $event.target.value)"
      >
    </span>
</template>
<script>

    export default {
        data(){
            return{
            }
        },
        props: ["value"],
        model: {
            prop: 'value',
            //這個事件名可以隨意寫，它實際上是規定了子組件要更新父組件值需要注冊的方法
            event: 'ababab'
        }
    }
</script>
<style lang="scss" scoped>
</style>

以上，就實現了子組件修改父組件v-model綁定的值。

它的原理是

1.展示：父組件v-model，子組件接收一個props值value，將它展示到子組件自己的input上。

2.改變：當子組件自身發生改變時，觸發自身的input方法，然后觸發父組件的事件方法，改變父組件的value，進而改變接收的props，實現自身展示的改變

 

例子中使用了model,官網是這樣說的，實際上是為了單選框,復選框按鈕等情況的時候，他們的值並不是value，而是checked,這種情況下，就需要寫這個。例如：

model: {
    prop: 'checked',
    event: 'change'
  },

 

 

另外還有個

同步修飾符sync

<comp :foo.sync="bar"></comp>
它實際上就是
<comp :foo="bar" @update:foo="val => bar = val"></comp>

所以當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：

this.$emit('update:foo', newValue)

好了，就這么多，記錄一下。

附上大神鏈接：https://www.haorooms.com/post/vue_vmodel