父子通信实现双向绑定

最新推荐文章于 2023-12-26 12:24:45 发布

万事胜意sy

最新推荐文章于 2023-12-26 12:24:45 发布

阅读量198

点赞数

分类专栏：笔记

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

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

把父组件的data传到子组件中再改变子组件input中的值使父组件的绑定data随着子组件input的值的变化而变化

<!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" :value=dnumber1 @input="inputchange">
    </div>
   
</template>
<script src="vue.js"></script>
<script>
    const cpn={
        template:"#cpn",
        props:{
            number1:Number,
        },
        data(){
            return {
                dnumber1:this.number1,
                
            }
        },
        methods:{
            inputchange(event){
                //让dnumber的值随着input里面的值的改变而改变
                //发生事件的target（目标），就是指发生指定事件对象value 对象的值
              this.dnumber1= event.target.value
              //子传父 规定时间为return 发送dnumber给return
              this.$emit("return",this.dnumber1)
            }
        }
    }
    const app=new Vue({
        el:"#div",
        data:{
            num1:1,
        },
        components:{
       //注册子组件
       cpn
        },
        methods:{
            //this.dnumber1返回回来的是value
            creturn(value){
                this.num1=parseInt(value)
            }
        }
    })
</script>

在这里插入图片描述

1.父传子
2.利用@input时间（input里面的内容改变一次就会执行函数）和event.target.value获取input每次改变后的内容然后赋值给组件data（dnumber）里，
并创建函数发射dnumber
再父组件中定义return函数，把父组件里面的data变成传过来的参数

万事胜意sy

关注

0
点赞
踩
0

收藏

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

把父组件的data传到子组件中再改变子组件input中的值使父组件的绑定data随着子组件input的值的变化而变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
复制链接

扫一扫