Vue常用传值方式、父传子、子传父及非父子实例分析


Posted in Javascript onFebruary 24, 2020

本文实例讲述了Vue常用传值方式、父传子、子传父及非父子。分享给大家供大家参考,具体如下:

Vue常用传值方式、父传子、子传父及非父子实例分析

父组件向子组件传值是利用props

子组件中的注意事项:props:[‘greetMsg'],注意props后面是[]数组可以接收多个值,不是{}。

且此处的greetMsg用greet-msg会报错,记住需用驼峰法命名

非父子组件进行传值

非父子组件之间传值,需要定义个公共的公共实例文件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>

Vue常用的传值方式就介绍完了,如果有什么不明白的,欢迎留言讨论!

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
es6中let和const的使用方法详解
Feb 24 #Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
JS数组扁平化、去重、排序操作实例详解
Feb 24 #Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 #Javascript
Vue快速实现通用表单验证的方法
Feb 24 #Javascript
微信小程序后端实现授权登录
Feb 24 #Javascript
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
永不消失的title提示代码
2007/02/15 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python中生成器和yield语句的用法详解
2015/04/17 Python
python中的错误处理
2016/04/10 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
初中学习计划书范文
2014/09/15 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2014年技术员工作总结
2014/11/18 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android