Day20——父子组件通信案例

最新推荐文章于 2023-09-08 16:43:28 发布

Android_la

最新推荐文章于 2023-09-08 16:43:28 发布

阅读量254

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40634846/article/details/107611369

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. 父子组件通信案例

一. 回顾

前面学习了Day19——组件化开发，今天学习一个父子组件通信案例

二. 父子组件通信案例

2.1 需求情况

在这里插入图片描述
创建一个组件，父组件传给子组件2个变量a，b，要求修改其中一个变量，另一个变量的值是前一个变量的100倍；修改后面的变量，前面的变量变为后面的变量的1/100倍。

使用父子组件通信实现。

2.2 分析

在这里插入图片描述

2.3 实现

注意代码中的注释，很重要，如下：

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

<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <!-- 不能直接修改子组件中从父组件传来的值。应该直接修改父组件的值,所以v-model=“number1"是报错的-->
    <!--<input type="text" v-model="number1">-->
<!--    <input type="text" v-model="dnumber1">-->
    <input type="text" :value="dnumber1" @input="num1input">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <!--<input type="text" v-model="number2">-->
<!--    <input type="text" v-model="dnumber2">-->
    <input type="text" :value="dnumber2" @input="num2input">
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        num1: 1,
        num2: 0,
      },
      methods: {
        num1change(value){
          console.log(typeof value);//value传来的是String类型，所以控制台会报错
          //将value转换成int型
          this.num1 = parseFloat(value);
        },
        num2change(value){
          console.log(typeof value);
          this.num2 = parseFloat(value);
        },
      },
      components: {
        cpn: {
          template: '#cpn',
          props: {
            number1: Number,//因为这是从父组件传来的，要双向绑定修改它的值，应该直接修改父组件的值
            number2: Number,
          },
          data(){
            return {
              dnumber1: this.number1,
              dnumber2: this.number2,
            }
          },
          methods: {
            num1input(event){
              //1.将input中的value复制到dnumber中
              this.dnumber1 = event.target.value;
              //2.为了让父组件k可以修改值，发出一个事件
              this.$emit('num1change', this.dnumber1);
              //3.同时修改dnumber2的值
              this.dnumber2 = this.dnumber1 * 100;
              //4.如果希望父组件的值也同时实现100倍的改变，就发送事件给父组件
              this.$emit('num2change', this.dnumber2);
            },
             num2input(event){
               this.dnumber2 = event.target.value;
               this.$emit('num2change', this.dnumber2);
               this.dnumber1 = this.dnumber2 / 100;
               this.$emit('num1change', this.dnumber1);
            },
          }
        }
      }
    })
</script>
</body>

2.4 使用子组件watch属性改进实现

注意代码中的注释，很重要，如下：

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

<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <input type="text" v-model="dnumber1">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2">
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        num1: 1,
        num2: 0,
      },
      methods: {
        num1change(value){
          console.log(typeof value);//value传来的是String类型，所以控制台会报错
          //将value转换成int型
          this.num1 = parseFloat(value);
        },
        num2change(value){
          console.log(typeof value);
          this.num2 = parseFloat(value);
        },
      },
      components: {
        cpn: {
          template: '#cpn',
          props: {
            number1: Number,//因为这是从父组件传来的，要双向绑定修改它的值，应该直接修改父组件的值
            number2: Number,
            name: '',
          },
          data(){
            return {
              dnumber1: this.number1,
              dnumber2: this.number2,
            }
          },
          //监听子组件的data，方法名是子组件的data变量名，入参有变量的旧值以及新值
          watch: {
            
            dnumber1(newValue){
              this.dnumber2 = newValue * 100;
              this.$emit('num1change', newValue);
            },
            dnumber2(newValue){
              this.dnumber1 = newValue / 100;
              this.$emit('num1change', newValue);
            },
            /**
             * 子组件的数据变量(newValue, oldValue){
             *   
             * }
             *
             * @param newValue 数据变量的新值
             * @param oldValue 数据变量的旧值
             */
            name(newValue, oldValue){

            }
          }
        }
      }
    })
</script>
</body>

Android_la

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day20——父子组件通信案例

文章目录一. 回顾二. 父子组件通信案例2.1 需求情况2.2 分析2.3 实现2.4 使用子组件watch属性改进实现一. 回顾前面学习了Day19——组件化开发，今天学习一个父子组件通信案例二. 父子组件通信案例2.1 需求情况创建一个组件，父组件传给子组件2个变量a，b，要求修改其中一个变量，另一个变量的值是前一个变量的100倍；修改后面的变量，前面的变量变为后面的变量的1/100倍。使用父子组件通信实现。2.2 分析2.3 实现注意代码中的注释，很重要，如下：<b
复制链接

扫一扫