1. 全栈程序员必看首页

4.vue 的双向绑定的原理是什么?_vue双向绑定底层原理

全栈程序员-用户IM • • 未分类

4.vue 的双向绑定的原理是什么?_vue双向绑定底层原理需求分析：通过输入框，双向绑定文本框显示。<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>Title</title></head><body><divid=”app”><cpn:number1=”num1″:number2=”num2″/>&lt

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

? 作者简介：哪吒，CSDN2021博客之星亚军?、新星计划导师✌、博客专家?

? 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师

? 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

目录

一、前端代码初体验

1、代码实例

2、浏览器显示

 二、根据异常改进

1、监听事件，反向赋值

 2、代码实例

3、浏览器显示

三、联动修改num1的值

1、代码实例

2、浏览器显示

四、watch

五、通过$refs完成父访问子

需求分析：

通过输入框，双向绑定文本框显示。

一、前端代码初体验

1、代码实例

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

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

<template id="cpn">
  <div>
    <h2>{
  
  {number1}}</h2>
    <input type="text" v-model="number1">
    <h2>{
  
  {number2}}</h2>
    <input type="text" v-model="number2">
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1: 1,
      num2: 0
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number
        },
      }
    }
  })
</script>

</body>
</html>

2、浏览器显示

4.vue 的双向绑定的原理是什么?_vue双向绑定底层原理

错误信息

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “number1”

谷歌翻译 –>

避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖。 相反，根据道具的值使用数据或计算属性。 道具被变异：“number1”

这时候要完成双向绑定怎么办呢？

红色异常显示，希望在data中定义一个其它属性。

输入框绑定方法：

 二、根据异常改进

1、监听事件，反向赋值

4.vue 的双向绑定的原理是什么?_vue双向绑定底层原理

 2、代码实例

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

<div id="app">
  <cpn :number1="num1"
       :number2="num2"/>
</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 src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1: 1,
      num2: 0
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number
        },
        data(){
            return{
                dnumber1:this.number1,
                dnumber2:this.number2
            }
        }
      }
    }
  })
</script>

</body>
</html>

3、浏览器显示

4.vue 的双向绑定的原理是什么?_vue双向绑定底层原理

三、联动修改num1的值

1、代码实例

但是，我想通过反向传到父组件中，也就是改变number1的值，也就是改变data中的num1，怎么整？

<!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"/>
</div>

<template id="cpn">
  <div>
    <h2>props:{
  
  {number1}}</h2>
    <h2>data:{
  
  {dnumber1}}</h2>
    <!--<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="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) {
        this.num1 = parseFloat(value)
      },
      num2change(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.为了让父组件可以修改值, 发出一个事件
            this.$emit('num1change', this.dnumber1)

            // 3.同时修饰dnumber2的值
            this.dnumber2 = this.dnumber1 * 100;
            this.$emit('num2change', this.dnumber2);
          },
          num2Input(event) {
            this.dnumber2 = event.target.value;
            this.$emit('num2change', this.dnumber2)

            // 同时修饰dnumber2的值
            this.dnumber1 = this.dnumber2 / 100;
            this.$emit('num1change', this.dnumber1);
          }
        }
      }
    }
  })
</script>

</body>
</html>

2、浏览器显示

4.vue 的双向绑定的原理是什么?_vue双向绑定底层原理

四、watch

watch关键是监听某一属性的改变，是上面写法的一种变形写法。

<!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"/>
</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) {
        this.num1 = parseFloat(value)
      },
      num2change(value) {
        this.num2 = parseFloat(value)
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number,
          name: ''
        },
        data() {
          return {
            dnumber1: this.number1,
            dnumber2: this.number2
          }
        },
        watch: {
          dnumber1(newValue) {
            this.dnumber2 = newValue * 100;
            this.$emit('num1change', newValue);
          },
          dnumber2(newValue) {
            this.number1 = newValue / 100;
            this.$emit('num2change', newValue);
          }
        }
      }
    }
  })
</script>

</body>
</html>

五、通过$refs完成父访问子

父子组件通信

在开发中，往往有一些数据需要送上层传递到下层；

比如在一个页面中，我们从服务器请求到很多的数据，其中一部分数据，并非是我们整个页面大组件的，需要在子组件中进行展示，这时，并不会让子组件再次请求一次，而是直接从父组件将数据传递给子组件。

那么如何传递呢？

官方提到：

通过props向子组件传递数据；

通过事件向父组件传递数据；

一般不推荐使用$children，$children一般用于拿到所有组件的时候使用。

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

<div id="app">
  <cpn></cpn>
  <cpn></cpn>

  <my-cpn></my-cpn>
  <y-cpn></y-cpn>

  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        // 1.$children
        // console.log(this.$children);
        // for (let c of this.$children) {
        //   console.log(c.name);
        //   c.showMessage();
        // }
        // 拿第三个组件的内容，但是下标值不太好用
        // console.log(this.$children[3].name);

        // 2.$refs => 对象类型, 默认是一个空的对象 ref='bbb'
        console.log(this.$refs.aaa.name);
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: '我是子组件的name'
          }
        },
        methods: {
          showMessage() {
            console.log('showMessage');
          }
        }
      },
    }
  })
</script>

</body>
</html>

4.vue 的双向绑定的原理是什么?_vue双向绑定底层原理

上一篇：Vue基础知识总结 5：vue实现树形结构

下一篇：Vue基础知识总结 7：插槽slot与vue导入导出

4.vue 的双向绑定的原理是什么?_vue双向绑定底层原理

关注公众号，备注1024，获取Java学习路线思维导图、加入万粉计划交流群  

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/180641.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • [WebView其中一项研究]:Web Apps基本介绍

    [WebView其中一项研究]:Web Apps基本介绍

    [WebView其中一项研究]:Web Apps基本介绍

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年1月5日
  • Java-线程池面试题

    Java-线程池面试题

    Java-线程池面试题线程池前言什么是线程池为什么要使用线程池线程池有哪些作用线程池的创建方式如何实现复用ThreadPoolExecutor核心参数其他相关总结前言线程池在面试、开发过程中都比较重要。本文总结了一些关于该方面的相关知识点。以下内容收集于蚂蚁课堂什么是线程池线程池和数据库连接池非常类似，可以统一管理和维护线程，减少没有必要的开销。为什么要使用线程池因为在项目开发过程中频繁的开启线程或者停止线程，线程需要重新被CPU从就绪状态调度到运行状态，需要发生CPU的上下文切换，效率非常低。线程的生命周期如

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月25日
  • 怎么修改WiFi频段_wifi5g与2.4g怎么切换

    怎么修改WiFi频段_wifi5g与2.4g怎么切换

    怎么修改WiFi频段_wifi5g与2.4g怎么切换在网络应用中对带宽要求较高的在线视频、高清点播等业务，如果使用5GHz频段进行传输，无线连接稳定性和传输速速率将更有保障，在这里以TP-LINK双频无线路由器作为演示，教你如何设置使用5GHz频段无线路由器。下面以TL-WDR4310为例介绍双频无线路由器在5GHz频段下的设置步骤。步骤一：在浏览器的地址栏上输入“192.168.1.1”打开路由器管理界面，输入用户名和密码(默认均为“admin”…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月20日
  • python函数详解_INDEX函数

    python函数详解_INDEX函数

    python函数详解_INDEX函数前言：一、函数的作用函数就是将一段具有独立功能的代码块整合到一个整体并命名，在需要的位置调用这个名称即可完成对应的需求。函数在开发过程中，可以更高效的实现代码重用。二、函数的使用步骤1.定义函数def函数名(参数):代码1代码2……2.调用函数函数名(参数)注意：不同的需求，参数可有可无。在Python中，函数必须先定义后使用。…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月18日
  • android高德地图中心点,高德地图中心点以及自定义infowindow[通俗易懂]

    android高德地图中心点,高德地图中心点以及自定义infowindow[通俗易懂]

    android高德地图中心点,高德地图中心点以及自定义infowindow[通俗易懂]jdfw.gif基本效果图就是这个样子，录制这个软件不太好使，每次切换地点是点击确定变更的。接下来就看看地图上的功能是如何实现的：实现的方式编写自定义的infowindow一，书写布局样式(自定义随意写)android:layout_width=”match_parent”android:layout_height=”match_parent”android:background=”@drawab…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月18日
  • <span>面试中的这些点，你get了吗？</span>

    面试中的这些点，你get了吗？

    面试中的这些点，你get了吗？

    全栈程序员-用户IM 全栈程序员-用户IM
    2020年11月20日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号