vscode——VUE父子通信的双向绑定实例（watch实现）（二）

最新推荐文章于 2023-01-12 13:04:34 发布

失忆爆表症

最新推荐文章于 2023-01-12 13:04:34 发布

阅读量355

点赞数

分类专栏： vue 笔记 vscode 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_44901175/article/details/107559386

版权

笔记同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

vscode

10 篇文章 1 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

具体的实现结果和功能都在

vscode——VUE父子通信的双向绑定实例（复杂但易懂）（一）

更改的部分为：

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>父子通信的双向绑定</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <cpn :number1 = "num1"  :number2 = "num2"
                @number1-change ="num1Change" @number2-change ="num2Change"></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>子传父：{{number1}}</h2>
      <h2>父传子：{{dnumber1}}</h2>
      <input type="text" v-model ="dnumber1" >
      <h2>子传父：{{number2}}</h2>
      <h2>父传子：{{dnumber2}}</h2>
      <input type="text" v-model ="dnumber2"  >
    </div>
  </template>

  <script>
    var app= new Vue({
      el: '#app',
      data: {
        num1:0,
        num2:1
      },
      methods: {
        num1Change(value){
          this.num1 = parseFloat(value)//string转化number
        },
        num2Change(value){
          this.num2 = parseFloat(value)
        }
      },
      components:{
        cpn:{
          template:'#cpn',
          props:{
            number1:Number,
            number2:Number
          },
          data() {
            return {
              dnumber1 : this.number1,
              dnumber2 : this.number2
            }
          },
          watch: {
            dnumber1(newValue){
              this.dnumber2 = newValue * 100
              this.$emit('number1-change',newValue)
            },
            dnumber2(newValue){
              this.dnumber1 = newValue / 100
              this.$emit('number2-change',newValue)
            }
          },
        },
      }
    });
  </script>
</body>

</html>