vue---v-modle實現字符組件通信

子父組件在做數據傳值和通信中，通常都是父組件通過【:props】進行數據的傳遞，通常用於父組件通過傳遞不同的參數，改變子組件。

但是經常會遇到這樣的場景：

需要父子組件進行數據通信，實現雙向數據綁定，可以利用 v-modle 實現父子組件數據交互通信。

父組件：

<template>
    <div>
        <child v-model="flag" :tag="tag" />
    </div>
</template>

<script>
export default {
    components:{ child },
    data(){
        return {
            flag: '',
            tag: '',
        }
    },
}
</script>

子組件：

<script>
export default {
    prop:{
        value:{
            type: String,
            default: ''
        },
        tag:{
            type: String,
            default: ''
        }
    },
    data(){
        return {
            flag: '',
            tag: '',
        }
    },
    methods:{
        handleBtn(){
            this.$emit('input','abc');
        }
    },
}
</script>

提示：

1、父組件裏面 v-model 綁定的值，將被 子組件 value 所接收。

2、子組件裏面通過 handleBtn 方法，可以更改父組件 v-model 的值。

這樣就實現了父子組件數據的通信。

打完收工！