记录Vue中router-view子组件与父组件传值(webpack)
记录Vue中router-view子组件与父组件传值应用情况页面代码一、子组件传值给父组件二、父组件传值给子组件应用情况为了避免在vue项目中每页都配置导航菜单,所以直接在app.vue中配置了导航菜单,但是发现当前激活菜单的 index虽然能在第一次选中是高亮,但是刷新页面后又会显示选中默认的index,如下情况:刷新后(同一请求路径):找了好多地方发现可以按照下面的方法解决,分两种情况:页面代
·
记录Vue中router-view子组件与父组件传值
应用情况
为了避免在vue项目中每页都配置导航菜单,所以直接在app.vue中配置了导航菜单,但是发现当前激活菜单的 index
虽然能在第一次选中是高亮,但是刷新页面后又会显示选中默认的index,如下情况:
刷新后(同一请求路径):
找了好多地方发现可以按照下面的方法解决,分两种情况:
页面代码
首先是app.vue的代码
<template>
<div id="app">
<el-container>
<el-header>
<el-menu default-active="1" class="el-menu-demo" :router="true" mode="horizontal">
<el-menu-item index="/"><img :src="$publicPath+'img/logo.png'" class="logo" /></el-menu-item>
<el-menu-item index="Home">后台管理系统</el-menu-item>
</el-menu>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu :default-active="defaultActive" :router="true" class="el-menu-vertical-demo">
<el-menu-item index="Home">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu index="User">
<template slot="title">
<i class="el-icon-location"></i>
<span>用户管理</span>
</template>
<el-menu-item index="User">用户权限管理</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
路由代码:
import VueRouter from "vue-router"
import Vue from "vue"
import Home from "@/components/Home"
import User from "@/components/User/User"
/**
* 安装插件
*/
Vue.use(VueRouter)
/**
* 创建路由对象
* @type {*[]}
*/
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
},
{
path: '/user',
component: User
}
]
/**
* 初始化路由 配置
* @type {VueRouter}
*/
const router = new VueRouter({
routes,
mode: 'history'
})
/**
* 导出路由
*/
export default router
一、子组件传值给父组件
首先修改app.vue(父组件):
<router-view @getIndex="activeChange" ></router-view>
添加方法js:
methods: {
activeChange(val) {
this.defaultActive = val
}
}
在user.vue中设置(子组件):
export default {
name: 'User',
props: {
msg: String
}, data() {
return {
defaultActive: 'User'
}
}, methods: {
},
mounted() {
this.$emit('getIndex', this.defaultActive);
}
};
这样就可以刷新后也可以选中正确的index.
二、父组件传值给子组件
这种情况适用于公共模块,比如搜索功能。
配置方法如下:
app.vue(父组件):
<router-view :searchVal="searchVal"></router-view>
searchVal: '', // data里面申明
this.searchVal = ‘需要传给子组件的值’; // 在需要传值的方法中处理
search.vue(子组件):
props: ['searchVal'],
watch: {
searchVal: function (val) {
console.log(val); // 接收父组件的值
}
},
更多推荐
所有评论(0)