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中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
js微信支付实现代码
Dec 22 Javascript
javascript表单正则应用
Feb 04 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
javascript实现点击小图显示大图
Nov 29 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获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP加密解密函数详解
2015/10/28 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
php微信开发之关注事件
2018/06/14 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
采购部部门职责
2013/12/15 职场文书
小学英语课后反思
2014/04/26 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
草房子读书笔记
2015/06/29 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
六年级数学教学反思
2016/02/16 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL