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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
Javascript中typeof 用法小结
May 12 Javascript
详解iframe与frame的区别
Jan 13 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
vue3.0 数字翻牌组件的使用方法详解
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
建立动态的WML站点(三)
2006/10/09 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
JQuery 入门实例1
2009/06/25 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
python实现多线程采集的2个代码例子
2014/07/07 Python
Python字符串格式化输出方法分析
2016/04/13 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python 画出来六维图
2019/07/26 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
平面设计自荐信
2013/10/07 职场文书
小学数学国培感言
2014/03/10 职场文书
大学社团计划书
2014/05/01 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
小班教师个人总结
2015/02/05 职场文书
社区义诊通知
2015/04/24 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python