在vue项目的开发过程中，必不可少的场景就是父子组件的交互，所以在这里整理一下父子组件数据的双向绑定。首先父组件数据改变时，子组件的props也会改变，所以主要是解决，子组件改变时触发父组件改变。

直接上代码

父组件：父组件一个变量msg，首先通过props给子组件传过去，再加vue的v-model指令实现父子组件数据的双向绑定。

复制<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>
js

子组件：子组件中绑定父组件传过来的msg，再加上@input=“$emit(‘input’, $event.target.value)”

复制<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>
js

这样先说一下，子组件中不能直接使用v-model，原因是不允许子组件改变父组件传过来的props的内容。

其实父组件的v-model=“msg"等同于:value=“msg” @input=”($event) => {msg = $event}"

所以说子组件的@input方法调用的其实是父组件的@input方法从而改变父组件的msg。

推荐阅读

1、整理一下JavaScript字符串的截取以及数组的截取 2、JavaScript的常用遍历方法整理 3、Vue生命周期 4、整理一下弹性布局知识点 5、推荐一下前端开发时npm源管理工具

关注公众号

关注贴吧：pei你看雪吧