Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解
route-view子頁面調(diào)用父頁面函數(shù)
最近寫項目的時候，有一個模塊需要刷新父頁面最新后臺數(shù)據(jù)，然后再進行操作，查詢很多資料搞不懂怎么調(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)建項目的時候，可以自然而然的發(fā)現(xiàn)，那就是在app.vue這個頁面里面存在一個<router-view>的tag標(biāo)簽。通過它，我們點擊鏈接，即可顯示出Vue的HelloWorld.vue頁面。
那么，到底是什么讓HelloWorld.vue頁面顯示出來，并且它的路由途徑和特點呢？
下面就一一來解釋一下
本質(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
}
}
]
}) 嵌套命名：不同于非嵌套，它常常用于布局上
針對這種格局，我們通過對路由進行配置來實現(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue打包添加gzip配置項方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vuex子模塊調(diào)用子模塊的actions或mutations實現(xiàn)方式
這篇文章主要介紹了Vuex子模塊調(diào)用子模塊的actions或mutations實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
VUE2—defineProperty和VUE3—proxy使用方式
Vue2和Vue3的響應(yīng)式原理不同,Vue2使用Object.defineProperty,Vue3使用Proxy,Object.defineProperty可以監(jiān)聽某個屬性,但不能監(jiān)聽整個對象,且無法監(jiān)聽對象屬性的新增和刪除,Proxy可以監(jiān)聽整個對象,且不會修改原數(shù)據(jù),可以監(jiān)聽數(shù)組的長度變化2025-01-01
vue如何處理base64格式文件pdf及圖片預(yù)覽功能
這篇文章主要給大家介紹了關(guān)于vue如何處理base64格式文件pdf及圖片預(yù)覽功能的相關(guān)資料,圖片的base64編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串,使用該字符串代替圖像地址,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue3路由頁面切換動畫animate.css效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實現(xiàn) 點擊顯示 再點擊隱藏 點擊頁面空白區(qū)域也隱藏效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue動態(tài)路由緩存不相互影響的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Vue簡單封裝axios之解決post請求后端接收不到參數(shù)問題
這篇文章主要介紹了Vue簡單封裝axios之解決post請求后端接收不到參數(shù)問題,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
ElementPlus 中el-select自定義指令實現(xiàn)觸底加載請求options數(shù)據(jù)的方法
觸底時,繼續(xù)向后端發(fā)請求獲取下一頁的數(shù)據(jù),請求回來的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實現(xiàn)觸底加載請求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了使用vue自定義如何實現(xiàn)Tree組件和拖拽功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12