1.在main.js中定义一个值(红色为重点)

new Vue({
el: '#app',
data: {
Bus: new Vue()
},
router,
store,
render: h => h(App)
})

2.在components/EditOrder.vue组件中点击按钮传值

<template>
<div class="analysis"
@click="analysis">点击</div>
</template>
<script>
export default {
methods: {
analysis() {
this.$root.Bus.$emit('analysisClick', true)
}
}
}
</script>

3.components/analysisAddress.vue中接收EditOrder组件传值

<script>
export default {
mounted() {
const that = this
this.$root.Bus.$on('analysisClick', function (msg) {
that.addressAnalysis = msg
})
}
</script>

好啦,大功告成,是不是很简单的样子

vue子组件与子组件之前传值-----最简单办法的更多相关文章

  1. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  2. Vue 组件&组件之间的通信 之 父组件向子组件传值

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...

  3. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  4. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  5. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

  6. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  8. Vue 父组件向子组件传值,传方法,传父组件整体

    父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...

  9. Vue props父组件向子组件传值详解

    vue官网上可以说有我们想要的一切,先贴上通过prop传值的官网地址:通过prop向子组件传递数据 Prop是什么? Prop是你可以在组件上注册的一些自定义特性.当一个值传递给一个prop特性的时候 ...

随机推荐

  1. C#类型成员:构造函数

    一.构造函数 构造函数是类的特殊方法,它永远不会返回值(即使是void),并且方法名和类名相同,同样支持重载.在使用new关键字创建对象时构造函数被间接调用,为对象初始化字段和属性的值. 无参构造函数 ...

  2. Linux生产环境上,最常用的一套“Sed“技巧

    sed命令应用广泛,使用简单,是快速文本处理的利器.它其实没多少技巧,背诵.使用是最合适的学习渠道,属于硬技能.但它又很复杂,因为高级功能太多.本篇不去关注sed的高级功能,仅对常用的一些操作,进行说 ...

  3. Vue 项目 VSCode 调试

    调试Vue搭建的前端项目 在项目根目录下的vue.config.js中添加: module.exports = { lintOnSave: false, //关闭eslint语法校验 //填写这部分 ...

  4. Docker 安装 MySQL 学习笔记

    https://www.runoob.com/docker/docker-install-mysql.html #docker search mysql #docker pull mysql:5.6 ...

  5. vue插件(还真是第一次接触)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. vue-cli3使用svg

    (根据网上教程实操,仅作个记录) 执行命令安装插件 npm install svg-sprite-loader --save-dev 在vue.config.js中,添加配置 module.expor ...

  7. rsync安全

    rsync可能泄露敏感文件 常用操作列举整个同步目录或指定目录:Defaultrsync 10.0.0.12:: rsync 10.0.0.12::www/ 下载文件或目录到本地:Defaultrsy ...

  8. python测量函数运行时间长度

    python测试函数运行时间长度的方法如下 import time def measure_time(): def wraps(func): def mesure(*args,**kwargs): s ...

  9. restfulframework引用多对多外键

    记录一下工作中遇到的问题 最近在写restfulframework,感觉还是很便利的 首先贴一下文档地址 https://www.django-rest-framework.org/api-guide ...

  10. JENKINS安卓打包CI

    jenkins构建脚本: [root@localhost tomcat]# cat move.sh #!/bin/bash # author lql release_dir=/data/android ...