vue 进阶之实现父子组件间的传值


Posted in Javascript onApril 26, 2019

本章我们将深入了解一下组件,并实现父子组件间的传值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1"></counter>
  <counter :count="count2"></counter>
</div>
<script>
  Vue.component("counter", {
    props:['count'],
    data(){
      return{
        number: this.count,
      }
    },
    template: `
      <p>{{count}} {{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
    }
  })
</script>
</body>
</html>

结果如下:

vue 进阶之实现父子组件间的传值

上面的代码中我们定义了一个 counter 组件,并在 HTML 内插入了两次,分别通过 :count = "" 的方式将父组件内的 count1 和 count2 传入,然后我们在 counter 组件内通过 props 属性将 count 属性接住,这样我们就将父组件的值传递给了子组件。我们就可以在 template 的模板中将传过来的 count 数据插入,我们也可以在子组件的 data 内将传过来的 count 值赋值给一个新的变量 number。

如果从父组件传过来的值需要参与逻辑运算时我们推荐将传入的值重新赋值给一个变量,因为子组件不允许直接修改父组件传过来的值,我们可以将传入的值赋值给新的变量,然后将该变量再传给父组件来修改父组件的值。如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1" @change="handleChange"></counter>
  <counter :count="count2" @change="handleChange"></counter>
  <p>{{total}}</p>
</div>
<script>
  Vue.component("counter", {
    props: ['count'],
    data() {
      return {
        number: this.count,
      }
    },
    methods: {
      handleClick() {
        this.number++;
        this.$emit('change', 1)
      }
    },
    template: `
      <p @click="handleClick">{{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
      total: 3,
    },
    methods: {
      handleChange(number) {
        this.total = this.total + number
      }
    }
  })
</script>
</body>
</html>

在以上代码中,我们在父组件中定义了一个 total 数据,初始值为 count1 + count2 的和。我们在子组件内定义了一个 handleClick() 的方法,让父组件传过来的 count 值每次都 +1,我们还在 handleClick() 的方法内定义了 this.emit( ′ change ′ ,1)的方法,它的意思是子组件通过 emit(′change′,1)的方法,它的意思是子组件通过emit 属性向外触发一个 change 事件,并且携带了一个参数 1,然后我们在 HTML 的 <counter> 标签内在父组件的 methods 属性内通过 handleChange() 方法监听这个 change 事件,即 @change 和 $emit 的事件名称自己定义,只要名称一致即可。在 handleChange() 方法内接收从子组件通过 change 事件传过来的参数 1,让后让 total 数据加上这个参数 1 即可实现一个简单的累加计算。

以上便是子组件向父组件传值的过程,结果如下:

vue 进阶之实现父子组件间的传值

从上面的例子我们已经实现了父子组件间的相互传值,是通过 change 事件将每次累加的数值 1 传给父组件,通过数据的方式修改 total 值,Vue 官方建议我们尽量通过数据的方式而不是操作 DOM 的方式来实现操作,但是在极端条件下我们必须要操作 DOM 来实现,Vue 也为我们提供操作 DOM 的方法,如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1" @change="handleChange" ref="one"></counter>
  <counter :count="count2" @change="handleChange" ref="two"></counter>
  <p>{{total}}</p>
</div>
<script>
  Vue.component("counter", {
    props: ['count'],
    data() {
      return {
        number: this.count,
      }
    },
    methods: {
      handleClick() {
        this.number++;
        this.$emit('change')
      }
    },
    template: `
      <p @click="handleClick">{{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
      total: 3,
    },
    methods: {
      handleChange() {
        console.log(this.$refs.one);
        console.log(this.$refs.two);
        this.total = this.$refs.one.number + this.$refs.two.number;
      }
    }
  })
</script>
</body>
</html>

上面的代码中,我们并没有通过 $emit 里的 change 事件传值给父组件,而是在 <coute> 标签内分别定义了 ref="one" ref="two"  属性,并且在 handleChange() 方法内通过监听子组件的 change 改变时打印一下这两个 ref 内的值,控制台的输出日志如下:

vue 进阶之实现父子组件间的传值

里面既包含了 $el 的 DOM,还有初始值 count=1 即handleClick() 方法执行后 number=2 的值,所以我们可以拿到 number 的值,让两个 number 相加即为 total 的值。

在 vue 中我们还是建议通过数据来操作而不是通过 DOM 来执行操作。

总结

以上所述是小编给大家介绍的vue 进阶之实现父子组件间的传值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于JQuery的cookie插件
Apr 07 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
再谈JavaScript线程
Jul 10 Javascript
node.js文件上传处理示例
Oct 27 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
javascript对象3个属性特征
Nov 17 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 #Javascript
配置一个vue3.0项目的完整步骤
Apr 26 #Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 #Javascript
JS异步错误捕获的一些事小结
Apr 26 #Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 #Javascript
vue请求本地自己编写的json文件的方法
Apr 25 #Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 #Javascript
You might like
用PHP实现验证码功能
2006/10/09 PHP
一个好用的分页函数
2006/11/16 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
C面试题
2015/10/08 面试题
酒店实习个人鉴定
2013/12/07 职场文书
高三自我评价
2014/02/01 职场文书
旅游节目策划方案
2014/05/26 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
同学聚会邀请函
2015/01/30 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
基于redis+lua进行限流的方法
2022/07/23 Redis