裴大头-秦可爱

裴大头-秦可爱

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

发表于 2021-08-06
裴大头
阅读量 333
更新于 2021-08-06

在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源管理工具

关注公众号 width:400px;height:150px;

关注贴吧:pei你看雪吧

评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • Vue项目代码规范

    1点赞1评论

  • JavaScript 的事件循环机制

    1点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • JavaScript的常用遍历方法整理

    1点赞8评论

  • 前端面试精选-基础篇

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 865 天访客 23359

© 2023 Pei你看雪鲁ICP备19037910号-2