欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解

 更新時間：2022年07月02日 11:37:25   作者：清清楚楚的清楚  
這篇文章主要介紹了Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

route-view子頁面調(diào)用父頁面函數(shù)

最近寫項(xiàng)目的時候，有一個模塊需要刷新父頁面最新后臺數(shù)據(jù)，然后再進(jìn)行操作，查詢很多資料搞不懂怎么調(diào)用的，現(xiàn)在解決了，做個記錄

vue版本為2.6

父頁面template代碼

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

父頁面函數(shù)代碼

//data是子頁面?zhèn)鬟^來的參數(shù)，如果不需要就不寫
getUser(data){
? ?this.infoArray= 123;
},

子頁面的代碼

props: ['infoArray'],
inject:['getUser'],
created() {
? ?this.$emit("getUser","如果需要傳值，參數(shù)寫在這里");
},

infoArray是父頁面查詢后獲取的結(jié)果，我這里子頁面有接收。

router-view解釋

在我們創(chuàng)建項(xiàng)目的時候，可以自然而然的發(fā)現(xiàn)，那就是在app.vue這個頁面里面存在一個<router-view>的tag標(biāo)簽。通過它，我們點(diǎn)擊鏈接，即可顯示出Vue的HelloWorld.vue頁面。

那么，到底是什么讓HelloWorld.vue頁面顯示出來，并且它的路由途徑和特點(diǎn)呢？

下面就一一來解釋一下

本質(zhì)，RouterView【命令視圖】和RouterLink【命令路線】本身是兩個組件。

操作步驟分別為：

1、創(chuàng)建組件

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作為其名稱，由于多個視圖的性質(zhì)，因此多個視圖需要統(tǒng)一路徑的多個組件。

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

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

針對這種格局，我們通過對路由進(jìn)行配置來實(shí)現(xiàn)上述布局：

{ 
  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>部分設(shè)置如下：

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

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評論