vuel路由间通讯_vue嵌套路由之间的通信（非vuex方法实现）

1.先在main.js里生成一个自定义事件

2.这是我路由设置的嵌套路由

3.用法：

父路由接收子路由用自定义事件

子路由里的事件绑定：

this.$root.myEvent.$emit("trans", value); //myEvent是main.js里设置的空的vue实例名

父路由监听：

that.$root.myEvent.$on("trans", function(msg) {

console.log("子路由传过来的值 " + msg);

});

4.现在直接上两个页面的代码

父路由：

我是父组件的内容

父路由设置的值{{parent}}

减一个数

我是从子路由里哪来的值{{getchild}}

name:"parent",

data() {return{

parent:0,

getchild:0,

};

props: {},

components: {},

created() {this.change(55);this.lisen();

mounted() {},

methods: {

change(value) {this.parent =value;

reduce() {this.parent = this.parent - 1;

lisen() {var that = this;

that.$root.myEvent.$on("trans", function(msg) {

console.log("子路由传过来的值 " +msg);

that.getchild=msg;

});

}

computed: {

watch: {

}

};

background: pink;

}

子路由代码：

我是子路由的内容

加一个数

我是从父路由里拿过来的值 {{this.$parent.parent}}

name:"child",

data() {return{

getparent:0,

child:0};

props: {},

components: {},

created() {this.get();

mounted() {},

methods: {

get() {this.getparent = this.$parent.parent;

},//加数字是绑定一个自定义事件

add() {this.child = this.child + 1;//console.log(this.child);

this.$root.myEvent.$emit("trans", this.child); //increment事件触发后，自动触发trans事件

}

computed: {}

};

background: lightblue;

}

vuel路由间通讯_vue嵌套路由之间的通信（非vuex方法实现）相关推荐

动态添加的路由直接访问_VUE 动态路由（二）
上一篇介绍了一种动态路由的方案,由前端写好路由表,然后通过登陆用户的角色来匹配出需要的路由.今天来研究下另外一种方案,后端返回路由表,然后生成导航菜单. 先讲下场景,同样是做权限控制,要根据登陆者的角 ...
VUE二级/多级路由配置方式（嵌套路由）
二级路由中path写法不同对应router-link标签to属性的不同写法二级路由配置path:"/XXX",path中带/ ,则对应的路由导航router-link中的to属性 ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
Docker容器间通讯，直接路由方式实现网络通讯
参考:https://yq.aliyun.com/articles/602107,修改其中的一个错误点.按照自己的方式整理的博文. 此时两台主机上的Docker容器如何直接通过IP地址进行通信? 一种 ...
vue 子路由如何激活父路由_vue嵌套路由（父子路由）
配置父子路由关系,A.vue和B.vue是Main.vue的子组件: { path: '/main/', name: 'main', component: () => import('compo ...
华为单臂路由配置，实现不同vlan之间的通信
一.环境说明 1.1 公司有路由器一台,交换机两台 1.2 有品管.市场.生产技术.工程技术4个部门,属于不同的VLAN 1.3 通过路由器来实现不同VLAN间通信且上外网二.网络TOP图示列三. ...
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
Socket编程总结—Android手机服务器与多个Android手机客户端之间的通信(非阻塞)
根据前两周写的关于Socket编程的网络通信的代码,现在对有关知识和注意事项进行总结如下: 1.首先说下Android NIO中有关Socket编程的类: 1)ServerSocketChannel类 ...
十、vue-router学习笔记——认识路由、vue-router基本使用、vue-router嵌套路由、vue-router参数传递、vue-router导航守卫、keep-alive
一.认识路由 1.1 什么是路由? 说起路由你想起了什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. - 维基百科额, 啥玩意? ...

vuel路由间通讯_vue嵌套路由之间的通信（非vuex方法实现）

vuel路由间通讯_vue嵌套路由之间的通信（非vuex方法实现）相关推荐

最新文章

热门文章