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 相关文章推荐
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
3种js实现string的substring方法
Nov 09 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
实例讲解vue源码架构
Jan 24 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
react antd实现动态增减表单
Jun 03 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文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 域名分析工具实现代码
2009/07/15 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python实现Windows电脑定时关机
2018/06/20 Python
python实现梯度下降算法
2020/03/24 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
会计与审计专业大专生求职信
2013/10/03 职场文书
名人演讲稿范文
2013/12/28 职场文书
乔迁宴答谢词
2014/01/21 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
如何写好竞聘报告
2019/04/03 职场文书