您现在的位置是：网站首页> 编程资料编程资料

Vue的route-view子页面调用父页面的函数详解_vue.js_

2023-05-24 505人已围观

简介 Vue的route-view子页面调用父页面的函数详解_vue.js_

route-view子页面调用父页面函数

最近写项目的时候，有一个模块需要刷新父页面最新后台数据，然后再进行操作，查询很多资料搞不懂怎么调用的，现在解决了，做个记录

vue版本为2.6

父页面template代码

父页面函数代码

//data是子页面传过来的参数，如果不需要就不写 getUser(data){    this.infoArray= 123; },

子页面的代码

props: ['infoArray'], inject:['getUser'], created() {    this.$emit("getUser","如果需要传值，参数写在这里"); },

infoArray是父页面查询后获取的结果，我这里子页面有接收。

router-view解释

在我们创建项目的时候，可以自然而然的发现，那就是在app.vue这个页面里面存在一个的tag标签。通过它，我们点击链接，即可显示出Vue的HelloWorld.vue页面。

那么，到底是什么让HelloWorld.vue页面显示出来，并且它的路由途径和特点呢？

下面就一一来解释一下

本质，RouterView【命令视图】和RouterLink【命令路线】本身是两个组件。

操作步骤分别为：

1、创建组件

2、命名路由

const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })

3、使用

完整操作步骤代码如下：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const Home = { template: '
This is Home
' } const Foo = { template: '
This is Foo
' } const Bar = { template: '
This is Bar {{ $route.params.id }}
' } const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/', name: 'home', component: Home }, { path: '/foo', name: 'foo', component: Foo }, { path: '/bar/:id', name: 'bar', component: Bar } ] }) new Vue({ router, template: ` 
Named Routes
Current route name: {{ $route.name }}
  • home
  • foo
  • bar
 ` }).$mount('#app')

命令视图：通常用在同时显示多个视图

没有name的视图，将default作为其名称，由于多个视图的性质，因此多个视图需要统一路径的多个组件。

const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })

嵌套命名：不同于非嵌套，它常常用于布局上

针对这种格局，我们通过对路由进行配置来实现上述布局：

{ path: '/settings', // You could also have named views at the top component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions }, { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] }

而，其中对settings.profile的