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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
javascript模块化简单解析
Apr 07 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
Javascript实现信息滚动效果
May 18 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
基于vuex实现购物车功能
Jan 10 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多线程抓取网页实现代码
2010/07/22 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用Python实现windows下的抓包与解析
2018/01/15 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
C++面试题目
2013/06/25 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
数学兴趣小组活动总结
2014/07/08 职场文书
暑期培训班策划方案
2014/08/26 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
研究生导师推荐信
2015/03/25 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python