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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
详解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 adodb分页实现代码
2009/03/19 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
jquery实现数字输入框
2017/02/22 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
python字典get()方法用法分析
2015/04/17 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
如何在python中执行另一个py文件
2020/04/30 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
医药营销专业个人自荐信
2013/09/29 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
2014年创卫实施方案
2014/02/18 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2014年招商工作总结
2014/11/22 职场文书
活动总结书怎么写
2015/05/11 职场文书
高中物理教学反思
2016/02/19 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
使用Redis实现分布式锁的方法
2022/06/16 Redis