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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 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 Undefined index报错的修复方法
2011/07/17 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php代码书写习惯优化小结
2013/06/20 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python基础教程之自定义函数介绍
2014/08/29 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python图书管理系统
2020/04/05 Python
pywinauto自动化操作记事本
2019/08/26 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Python Process多进程实现过程
2019/10/22 Python
浅析matlab中imadjust函数
2020/02/27 Python
自荐信结尾
2013/10/27 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
司考复习计划
2015/01/19 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
毕业论文致谢词
2015/05/14 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书