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

目录
  • route-view子页面调用父页面函数
  • router-view解释
    • 下面就一一来解释一下
    • 命令视图:通常用在同时显示多个视图

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

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

vue版本为2.6

父页面template代码

<router-view  v-on:getUser="getUser" :infoArray="infoArray"></router-view>

父页面函数代码

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

子页面的代码

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

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

router-view解释

在我们创建项目的时候,可以自然而然的发现,那就是在app.vue这个页面里面存在一个<router-view>的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: '<div>This is Home</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }

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: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>Current route name: {{ $route.name }}</p>
      <ul>
        <li><router-link :to="{ name: 'home' }">home</router-link></li>
        <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
        <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

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

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

没有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的<template>部分设置如下:

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue.js路由vue-router使用方法详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w

  • vue中router-view组件的使用详解

    在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面 例如:下图中通过点击侧边栏不同的组件路由到不同的组件页,而侧边栏和顶部部分是不变的,切换的只是组件页面. 这个时候我们就需要用到 路由中的 router-view组件(也叫路由占位符) 了 首先我们来到 需要切换不同组件页的页面 ,在自己需要的位置 添加 router-view组件 Home.vue <template> <!--头部区域--> <el-header> <div> <

  • vue中的router-view组件的使用教程

    开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用. 比如我们在一个导航组件中写了三个导航链接,他们的地址分别为:/food,/rating,/seller,点击每个导航链接都会跳转到不同的组件,我们通过<router-view></router-view> <template> <div class="navbar"> &l

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • Vue的route-view子页面调用父页面的函数详解

    目录 route-view子页面调用父页面函数 router-view解释 下面就一一来解释一下 命令视图:通常用在同时显示多个视图 route-view子页面调用父页面函数 最近写项目的时候,有一个模块需要刷新父页面最新后台数据,然后再进行操作,查询很多资料搞不懂怎么调用的,现在解决了,做个记录 vue版本为2.6 父页面template代码 <router-view  v-on:getUser="getUser" :infoArray="infoArray"

  • Java子线程调用RequestContextHolder.getRequestAttributes()方法问题详解

    相信很多开发过程中都用过RequestContextHolder.getRequestAttributes(),没错,我也经常用,但今天出现了问题,获取到的实例是空的 原因是因为我新开了一个子线程,在子线程调用了RequestContextHolder.getRequestAttributes().实际获取到的是空的 然后查看了源码 ThreadLocal获取.一个请求到达容器后,Spring会把该请求Request实例通过setRequestAttributes方法 把Request实例放入该

  • Vue监听数据渲染DOM完以后执行某个函数详解

    实例如下: vm.$watch('某data数据',function(val){ vm.$nextTick(function() { 某事件(); }); }) 以上这篇Vue监听数据渲染DOM完以后执行某个函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • PHP封装curl的调用接口及常用函数详解

    如下所示: <?php /** * @desc 封装curl的调用接口,post的请求方式 */ function doCurlPostRequest($url, $requestString, $timeout = 5) { if($url == "" || $requestString == "" || $timeout <= 0){ return false; } $con = curl_init((string)$url); curl_setop

  • Python中函数的基本定义与调用及内置函数详解

    前言 函数function是python编程核心内容之一,也是比较重要的一块.首先我们要了解Python函数的基本定义: 函数是什么? 函数是可以实现一些特定功能的小方法或是小程序.在Python中有很多内建函数,当然随着学习的深入,你也可以学会创建对自己有用的函数.简单的理解下函数的概念,就是你编写了一些语句,为了方便使用这些语句,把这些语句组合在一起,给它起一个名字.使用的时候只要调用这个名字,就可以实现语句组的功能了. 语法如下: # 定义方式 : def functionname([pa

  • js中iframe调用父页面的方法

    本文实例讲述了js中iframe调用父页面的方法.分享给大家供大家参考.具体实现方法如下: 子页面调用父页面的方法在js中很容易实现.我们只需要在主页面加个函数,然后在子页面通过window.parent.方法()即可实现了 比如调用a()函数,就写成: 复制代码 代码如下: window.parent.a(); 但是我在chrome浏览器下却发现此方法无效了 复制代码 代码如下: //在父页面中调用该函数 <script> function dey() { var cards_frame=d

  • js调用父框架函数与弹窗调用父页面函数的简单方法

    调用父级中的 aaa的函数 子页面中: onclick="window.parent.frames.aaa()" 父页面中: function aaa() { alert('bbbbb'); } frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent window.opener引用的是window.open打开的页面的父页面. window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面. 可以这样 window.frames[0]

  • JavaScript子窗口调用父窗口变量和函数的方法

    本文实例讲述了JavaScript子窗口调用父窗口变量和函数的方法.分享给大家供大家参考.具体如下: 示例1:子窗口是新打开的窗口 父窗口: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.

  • js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法

    重点是阻止默认的刷新,这样外部页面就不刷新了,然后指定刷新iframe,我下面给出了思路 document.onkeypress = function(e){ if(e.keyCode == 116){ e.preventDefault(); //组织默认刷新 var iframeSrc = iframe.src; iframe.src = iframeSrc; } } iframe页面里再写如下: var iframeSrc = parent.iframe.src; document.onke

随机推荐