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 相关文章推荐
js 多浏览器分别判断代码
Apr 01 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
JavaScript中return false的用法
Mar 12 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
在vue项目中使用md5加密的方法
Sep 14 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/11/13 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
python k-近邻算法实例分享
2014/06/11 Python
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python fileinput模块使用实例
2015/06/03 Python
python实现树形打印目录结构
2018/03/29 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
django Serializer序列化使用方法详解
2018/10/16 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python中如何使用insert函数
2020/01/09 Python
数字天堂软件测试面试题
2012/12/23 面试题
先进工作者获奖感言
2014/02/08 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
新年主持词
2014/03/27 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
南京南京观后感
2015/06/02 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS