记录一下Vue中父子组件数据双向绑定

<template>
    <div class="index">
        <h2>父组件</h2>
        <input v-model="msg" type="text" />
        <children :msg="msg" v-model="msg" />
    </div>
</template>

<script>
import children from "../components/Children";
export default {
    name: "father",
    components: {
        children,
    },
    data() {
        return {
            msg: "大头大头下雨不愁",
        };
    },
};
</script>
复制

<template>
    <div>
        <h2>子组件</h2>
        <input type="text" :value="msg" @input="$emit('input', $event.target.value)">
    </div>
</template>

<script>
    export default {
	name: "children",
        props: {
            msg: {
                type: String,
                default: ''
            },
        },
    }
</script>
复制