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实现多域名不同文件的调用方法
Jan 12 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
Javascript Dom元素获取和添加详解
Sep 24 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
Python使用Scrapy爬取妹子图
2015/05/28 Python
python与php实现分割文件代码
2017/03/06 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python实现微信自动回复功能
2018/04/11 Python
对numpy中轴与维度的理解
2018/04/18 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
物业管理公司实习生自我鉴定
2013/09/19 职场文书
自动化专业毕业生自荐信
2013/11/01 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python