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. 【夯实基础】- Java中的fail-fast机制

    转载自:Java中的fail-fast机制 遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过普通的for删除删除符合条件 ...

  2. Html-元素类型笔记

    注意点: 元素类型分为 块级元素 和 行内元素 块级元素: 在网页中以块的形式显示,默认情况都会占据一行,两个相邻的块级元素不会出现并列显示的元素,按照顺序自上而下排列. 块级元素可以定义自己的宽度和 ...

  3. Nginx配置Yii:backend&frontend

    #My vlson.top project #frontend server { listen 80; server_name www.vlson.com; #charset koi8-r; set ...

  4. WC_Project

    个人项目:WC_Project 一.GitHub项目地址 GitHub项目地址:https://github.com/ting9500/WC_GNIT.git 二.PSP表格 PSP2.1 Perso ...

  5. 图说jdk1.8新特性(1)--- 函数式接口

    函数式接口 总结起来就以下几点: 如果一个接口要想成为函数接口(函数接口可以直接用lambda方式简化),则必须有且仅有一个抽象的方法(非default和static) 可以通过注解@Function ...

  6. java程序员常用的cmd命令

    1.查看端口号或者进程号使用情况 1.1.查看所有端口占用情况 C:\Users\Administrator>netstat -ano 活动连接 协议 本地地址 (ip:端口) 外部地址 状态 ...

  7. Gitlab 重置 root 密码

    要重置root密码,请先使用root权限登录服务器.使用以下命令启动Ruby on Rails控制台: gitlab-rails console production 等到控制台加载完毕,您可以通过搜 ...

  8. sphinx中文版Coreseek中文检索引擎安装和使用方法(Linux)

    sphinx中文版Coreseek中文检索引擎安装和使用方法(Linux)     众所周知,在MYSQL数据库中,如果你在百万级别数据库中使用 like 的话那你一定在那骂娘,coreseek是一个 ...

  9. 如何使用Mojave将APFS卷上的MacOS Catalina Beta安装到双引导

    如果你想与macOS Mojave或macOS High Sierra一起运行MacOS Catalina Beta,你可以通过向Mac添加一个新的APFS卷来实现这一点,如果该Macs硬盘被格式化为 ...

  10. SWD烧录/仿真方式

    单片机在烧写/仿真的时候具有一种方式叫做SWD,这种方式只用到两根线SWDIO,SWCLK.一般SWD和JTAG中的JTMS和JTCK共用的.由于线少,所以使用非常方便,但是速率相对较低. 在接线时, ...