vue 实现父子组件双向绑定数据

哈喽 大家好！

今天小李和大家聊一下vue 父子组件的双向绑定

欢迎大家在留言区留言讨论👏👏👏👏👏👏

父传子：通过props穿参数 

子传父：通过$emit

-------------     首先父组件的写法

           父传子   :flag.sync="flag"

<template>
    <div>
        <button @click="openMask">点击打开遮罩层</button>
        //   使用遮罩层   使用 flag 判断 如果是true的时候显示遮罩层
        <MaskDetails v-if="flag" :flag.sync="flag"></MaskDetails>
    </div>
</template>
<script>
    //  这边引入 组件   组件路径根据自己项目框架 对应的路径
    //  import MaskDetails from "@/components/MaskDetails.vue;
	export default {
		name:"Mask",
        components:{
            MaskDetails
        },
		data() {
			return {
				flag:false,
			};
		},
        methods:{
            openMask(){
                this.flag = true
            },
        },
	}
</script>

-------------     子组件的写法

        通过props接受父组件传来的参数

        然后在触发事件   子传父        this.$emit    传值    实现父子组件双向绑定

 //   我是子组件   MaskDetails.vue 文件

<template>
    <div>
        <button @click="close">关闭遮罩层</button>
    </div>
</template>
<script>
	export default {
		name:"MaskDetails",
        props:{
            flag: {
				type: Boolean,
		    },
        },
		data() {
			return {
				
			};
		},
        methods:{
            close(){
                this.$emit('update:flag',false)
            },
        },
	}
</script>

 

如果小李写的文章对您有用   请关注小李  互相讨论前端知识  

点个赞再走呗！！！！