我要评论vue子路由调用父路由
父路由页面
<template>
<div style="height: 100%">
<!-- 路由占位符 -->
<router-view @update="getrightlist()" />
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
}
},
methods: {
// 获取权限数据
getrightlist(data) {
console.log("45465456");
},
},
}
<script>
子路由页面
let _that = this;
_that.$emit("update");
vue子路由调用父路由中的方法和参数
实现方式
直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。
使用this.$parent.xx()即可调用对应父亲路由的方法
测试代码
- 父页面：
<template>
<div class="parent-demo">
<div>这是父页面</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
parentparam: '父页面数据'
}
},
methods: {
// 初始化
init (msg) {
alert('这是父页面，传入的参数是："' + msg + '"')
}
}
}
</script>- 子页面：
<template>
<div class="children-demo">
<div>这是子页面</div>
</div>
</template>
<script>
export default {
data () {
return {}
},
mounted () {
this.init()
},
methods: {
// 初始化
init () {
this.$parent.init('在子页面中调用父页面的数据和方法，' + this.$parent.parentparam);
}
}
}
</script>测试结果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论