父子通信watch实现双向通信

最新推荐文章于 2021-10-26 16:59:17 发布

万事胜意sy

最新推荐文章于 2021-10-26 16:59:17 发布

阅读量175

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_50736511/article/details/113182079

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <h1>父组件的值{{num1}}</h1>
     <cpn :number1="num1"  @return="creturn"></cpn>
       
    </div>
</body>
</html>
<template id="cpn">
    <div>
      <h1>子组件的值（获取了父组件的值）:{{number1}}</h1>
      <h1>子组件data（返回props的值）: {{dnumber1}}</h1>
       <input type="text" v-model="dnumber1" >
    </div>
   
</template>
<script src="vue.js"></script>
<script>
    const cpn={
        template:"#cpn",
        props:{
            number1:String,
            
        },
        data(){
            return {
                dnumber1:this.number1,
                
            }
        },
       watch:{
           dnumber1(newValue){
               this.dnumber1=newValue,
               this.$emit("return",newValue)
           }
       }
    }
    const app=new Vue({
        el:"#div",
        data:{
            num1:'1',
        },
        components:{
       //注册子组件
       cpn
        },
        methods:{
            //this.dnumber1返回回来的是value
            creturn(newValue){
                this.num1=newValue
            }
        }
    })
</script>

在这里插入图片描述
利用v-model进行双向绑定再用watch（当里面的元素发生改变时所执行下面的函数）监听元素的改变进行发射和赋值

万事胜意sy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
父子通信watch实现双向通信

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="d
复制链接

扫一扫