Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)


Posted in Javascript onAugust 16, 2018

Vue2.0 传值方式:

在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。

Vue常用的三种传值方式有:

•父传子

•子传父

•非父子传值

引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:

Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

接下来,我们通过实例来看可能会更明白一些:

1. 父组件向子组件进行传值

Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

父组件:

<template>
 <div>
  父组件:
  <input type="text" v-model="name">
  <br>
  <br>
  <!-- 引入子组件 -->
  <child :inputName="name"></child>
 </div>
</template>
<script>
 import child from './child'
 export default {
  components: {
   child
  },
  data () {
   return {
    name: ''
   }
  }
 }
</script>

子组件:

<template>
 <div>
  子组件:
  <span>{{inputName}}</span>
 </div>
</template>
<script>
 export default {
  // 接受父组件的值
  props: {
   inputName: String,
   required: true
  }
 }
</script>

2. 子组件向父组件传值

Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

子组件:

<template>
 <div>
  子组件:
  <span>{{childValue}}</span>
  <!-- 定义一个子组件传值的方法 -->
  <input type="button" value="点击触发" @click="childClick">
 </div>
</template>
<script>
 export default {
  data () {
   return {
    childValue: '我是子组件的数据'
   }
  },
  methods: {
   childClick () {
    // childByValue是在父组件on监听的方法
    // 第二个参数this.childValue是需要传的值
    this.$emit('childByValue', this.childValue)
   }
  }
 }
</script>

父组件:

<template>
 <div>
  父组件:
  <span>{{name}}</span>
  <br>
  <br>
  <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
  <child v-on:childByValue="childByValue"></child>
 </div>
</template>
<script>
 import child from './child'
 export default {
  components: {
   child
  },
  data () {
   return {
    name: ''
   }
  },
  methods: {
   childByValue: function (childValue) {
    // childValue就是子组件传过来的值
    this.name = childValue
   }
  }
 }
</script>

3. 非父子组件进行传值

非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。

公共bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

组件A:

<template>
 <div>
  A组件:
  <span>{{elementValue}}</span>
  <input type="button" value="点击触发" @click="elementByValue">
 </div>
</template>
<script>
 // 引入公共的bug,来做为中间传达的工具
 import Bus from './bus.js'
 export default {
  data () {
   return {
    elementValue: 4
   }
  },
  methods: {
   elementByValue: function () {
    Bus.$emit('val', this.elementValue)
   }
  }
 }
</script>

组件B:

<template>
 <div>
  B组件:
  <input type="button" value="点击触发" @click="getData">
  <span>{{name}}</span>
 </div>
</template>
<script>
 import Bus from './bus.js'
 export default {
  data () {
   return {
    name: 0
   }
  },
  mounted: function () {
   var vm = this
   // 用$on事件来接收参数
   Bus.$on('val', (data) => {
    console.log(data)
    vm.name = data
   })
  },
  methods: {
   getData: function () {
    this.name++
   }
  }
 }
</script>

 总结

以上所述是小编给大家介绍的Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
详解redux异步操作实践
Aug 15 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
微信小程序实现录音Record功能
May 09 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 #Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 #Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 #Javascript
深入理解Vue router的部分高级用法
Aug 15 #Javascript
JS打印彩色菱形的实例代码
Aug 15 #Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 #Javascript
layui 优化button按钮和弹出框的方法
Aug 15 #Javascript
You might like
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
网页中CDATA标记的说明
2010/09/12 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python实现名片管理系统
2018/11/29 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
运动会开幕式解说词
2014/02/05 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
岗位工作说明书
2014/07/29 职场文书
《植树问题》教学反思
2016/03/03 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
如何Python使用re模块实现okenizer
2022/04/30 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers