Vue.js:父子组件通信-结合双向绑定-watch

一、需求一

父组件有两个数num1=1,num2=0,传进子组件并在子组件显示,支持

  • 子组件通过输入框修改该值的显示
  • 同步修改父组件的值

二、代码 


<!--作者: ikunsdc -->
<!--日期: 2021/03/10 00:36 -->


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change" >
  </cpn>
</div>

<template id="cpn">
  <div>
<!--    使用data中的计算属性进程改动数据,双向绑定-->
    <h2>props:{{number1}}---[父组件传进来num1值]</h2>
    <h2>data:{{dnumber1}}---[子组件当前number1值]</h2>
<!--    单向绑定,只绑定子组件的数据-->
    <input type="text" v-model="dnumber1">   单向绑定,只绑定子组件的数据
    <hr>
    <input type="text" v-bind:value="dnumber1" v-on:input="num1Input"> 双向绑定
    <!--    @input后面太长了 可以写成函数-->
<!--    <input type="text" :value="dnumber1" @input="num1Input">-->
    <h2>props:{{number2}}---[父组件传进来num2值]</h2>
    <h2>data:{{dnumber2}}---[子组件当前number1值]</h2>
    <input type="text" v-model="dnumber2">   单向绑定,只绑定子组件的数据
    <hr>
    <input type="text" :value="dnumber2" @input="num2Input">双向绑定
<!--    单向绑定,只绑定子组件的数据-->
<!--    <input type="text" v-model="dnumber2">-->
<!--    直接绑定,Vue不支持-->
<!--    <h2>{{number1}}</h2>-->
<!--    <input type="text" v-model="number1">-->
<!--    直接绑定,Vue不支持-->
<!--    <h2>{{number2}}</h2>-->
<!--    <input type="text" v-model="number2">-->
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      num1:1,
      num2:0
    },
    methods: {
      num1change(value){
        this.num1 = parseFloat(value)
      },
      num2change(value){
        this.num2 = parseFloat(value)
      }
    },
    components:{
      cpn :{
        template:'#cpn',
        props:{
          //如果只是想直接展示的话,就可以直接用
          //如果要改数据的话,最好是放在data中用计算属性更改
          number1:Number,
          number2:Number
        },
        data(){
          return{
            dnumber1:this.number1,
            dnumber2:this.number2
          }
        },
        methods:{
          num1Input(event){
            //1.将input的值,复制到dnumber中
            this.dnumber1 = parseInt(event.target.value);
            //2.为了让父组件可以修改值,发出一个事件。
            this.$emit('num1change',this.dnumber1)
          },
          num2Input(event){
            this.dnumber2 = event.target.value;
            this.$emit('num2change',this.dnumber2)
            //this.$emit('num1change',this.dnumber1)
          }
        }
      }
    }
  })
</script>
</body>
</html>

 使用watch属性实现

  • 是一个对象和props,data平级
  • 可以监听props的值变化

 


<!--作者: ikunsdc -->
<!--日期: 2021/03/10 00:36 -->


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change" >
  </cpn>
</div>

<template id="cpn">
  <div>
<!--    使用data中的计算属性进程改动数据,双向绑定-->
    <h2>props:{{number1}}---[父组件传进来num1值]</h2>
    <h2>data:{{dnumber1}}---[子组件当前number1值]</h2>
<!--    单向绑定,只绑定子组件的数据-->
    <input type="text" v-model="dnumber1">   双向绑定+watch实现
    <hr>
   
    <h2>props:{{number2}}---[父组件传进来num2值]</h2>
    <h2>data:{{dnumber2}}---[子组件当前number1值]</h2>
    <input type="text" v-model="dnumber2">   双向绑定+watch实现
    <hr>
    
<!--    单向绑定,只绑定子组件的数据-->
<!--    <input type="text" v-model="dnumber2">-->
<!--    直接绑定,Vue不支持-->
<!--    <h2>{{number1}}</h2>-->
<!--    <input type="text" v-model="number1">-->
<!--    直接绑定,Vue不支持-->
<!--    <h2>{{number2}}</h2>-->
<!--    <input type="text" v-model="number2">-->
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      num1:1,
      num2:0
    },
    methods: {
      num1change(value){
        this.num1 = parseFloat(value)
      },
      num2change(value){
        this.num2 = parseFloat(value)
      }
    },
    components:{
      cpn :{
        template:'#cpn',
        props:{
          //如果只是想直接展示的话,就可以直接用
          //如果要改数据的话,最好是放在data中用计算属性更改
          number1:Number,
          number2:Number
        },
        data(){
          return{
            dnumber1:this.number1,
            dnumber2:this.number2
          }
        },
        watch:{
          dnumber1(newValue){        // 监听到变化为新值newvalue时,执行下列方法
            this.dnumber1 =newValue;
            this.$emit('num1change',this.dnumber1)
          },
          dnumber2(newValue){
            this.dnumber2 =newValue;
            this.$emit('num2change',this.dnumber2)
            //this.$emit('num1change',this.dnumber1)
          }
        }
      }
    }
  })
</script>
</body>
</html>

 

三、运行:

单向绑定指定修改子组件data值,双向绑定还可以修改父组件的data值。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值