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 的值。

这样就实现了父子组件数据的通信。

打完收工！