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


相关推荐

  • VS解决BEX错误但不能关闭DEP保存

    VS解决BEX错误但不能关闭DEP保存

    VS解决BEX错误但不能关闭DEP保存

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年1月17日
  • FTP协议讲解

    FTP协议讲解

    FTP协议讲解FTP概述文件传输协议（FTP）作为网络共享文件的传输协议，在网络应用软件中具有广泛的应用。FTP的目标是提高文件的共享性和可靠高效地传送数据。在传输文件时，FTP客户端程序先与服务器建立连接，然后向服务器发送命令。服务器收到命令后给予响应，并执行命令。FTP协议与操作系统无关，任何操作系统上的程序只要符合FTP协议，就可以相互传输数据。本文主要基于LINUX平台，对FTP…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月21日
  • 基于特征的图像拼接算法_图像拼接算法原理

    基于特征的图像拼接算法_图像拼接算法原理

    基于特征的图像拼接算法_图像拼接算法原理目录APAP算法思路几个问题SVD在最小二乘中的应用DLT求单应性矩阵HMovingDLT求局部单应性矩阵实现的小细节文献图像拼接首先通过一些手段（标定、SIFT等特征点、其他传感器等）获取图像间的对应关系（2D-2D）。这个对应关系可以用单应性矩阵HHH（也称透视变换）描述[x′y′w′]=[h00h01h02h10h11h12h20h21h22][xyw]=H[xyw](1)\begin{aligned}\left[\begin{matrix}x’\\y’\\w’\end{matrix}\ri

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月22日
  • quartus II 过期怎么办？

    quartus II 过期怎么办？

    quartus II 过期怎么办？转自：http://computersren.com/blogs/blogsDetails.aspx?id=20140303205736&id2=new博客内容： quartusII过期怎么办？把电脑的日期改到过期之前的日期就可以啦。因为单位的电脑上装有瑞星杀毒软件，激活成功教程的工具不能用，所以从网上找到这个答案，在网上试一试，还真行，把日期调过了，quartusII就可以用

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月31日
  • Oracle列转行函数LISTAGG() WITHIN GROUP ()的使用方法

    Oracle列转行函数LISTAGG() WITHIN GROUP ()的使用方法

    Oracle列转行函数LISTAGG() WITHIN GROUP ()的使用方法前言：最近在写一些比较复杂的SQL，是一些统计分析类的，动不动就三四百行，也是首次写那么长的SQL，有用到一些奇形怪状的SQL函数，在这里结合网上的例子做一些笔记，以后用到不记得用法可以翻出来看！1.基础用法：LISTAGG(XXX,XXX)WITHINGROUP(ORDERBYXXX)，就像聚合函数一样，通过Groupby语句，把每个Group的一个字段，拼接起来…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月24日
  • pycharm导入cv2包_pycharm安装cv2失败

    pycharm导入cv2包_pycharm安装cv2失败

    pycharm导入cv2包_pycharm安装cv2失败windows下1.情况一:已在官网下载opencv无需下载,只需要导入环境即可;1.首先,在opencv目录中找到cv2文件夹:opencv3.4.8\opencv\build\python\cv2复制文件夹2.找到Python的根路径,在项目列表可查看(以实际显示的路径为主):在python.exe目录下找到Lib\site-packages,粘贴文件夹2.情况二:下载并…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月26日

发表回复

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

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