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 相关文章推荐
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JS中字符串trim()使用示例
May 26 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
JavaScript实现班级抽签小程序
May 19 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 抽象类的简单应用
2011/09/06 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python设计模式之命令模式简单示例
2018/01/10 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Java如何格式化日期
2012/08/07 面试题
.NET remoting的两种通道是什么
2016/05/31 面试题
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
应届生法律顾问求职信
2013/11/19 职场文书
中学生打架检讨书
2014/02/10 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
大三学习计划书范文
2014/05/02 职场文书
设计大赛策划方案
2014/06/13 职场文书
校园活动策划方案
2014/06/13 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Python中的xlrd模块使用整理
2021/06/15 Python