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 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
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数组合并的二种方法
2014/03/21 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
Python 爬虫图片简单实现
2017/06/01 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python新手学习装饰器
2020/06/04 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
食堂员工工作职责
2013/12/18 职场文书
六查六看剖析材料
2014/02/15 职场文书
本科生就业推荐信
2014/05/19 职场文书
新品发布会策划方案
2014/06/08 职场文书
离职证明标准格式
2014/09/15 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
就业推荐表导师评语
2014/12/31 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
Mysql数据库group by原理详解
2022/07/07 MySQL