vue 跨頁面呼叫方法 vue跨頁面呼叫與傳參

2021-10-13 01:25:10 字數 2009 閱讀 5461

正常的頁面跳轉與傳參,推薦方法2、3,不用特別修改路由

第一種this.$router.push(`,

路由配置:

path: '/describe/:id',

name: 'describe',

component: describe

接收引數:

this.$route.params.id

第二種this.$router.push({

name: 'describe',

params: {

id: id

路由配置

path: '/describe',

name: 'describe',

component: describe

獲取引數:

this.$route.params.id

第三種this.$router.push({

path: '/describe',

query: {

id: id

路由配置:

path: '/describe',

name: 'describe',

component: describe

引數獲取:

this.$route.query.id

父頁面與子頁面之間傳參

父頁面區域設定

其中 @my-event="getmyevent" 用來給子頁面呼叫的

子頁面呼叫方法

this.$emit('my-event','refresh');

//其中 refresh 是引數

父頁面接收,其中id 對應引數 refresh,可多個,按順序輸入輸出引數

getmyevent: function(id) {

this.upstate(id)

父頁面呼叫子頁面方法

this.$refs.childrenmode.loadselect();

其中子頁面需要有 loadselect 方法,否則會報錯,需要注意的是,這個子頁面必須是已經載入好的。

prop和$ref之間的區別:

prop 著重於資料的傳遞,它並不能呼叫子元件裡的屬性和方法。像建立文章元件時,自定義標題和內容這樣的使用場景,最適合使用prop。

$ref 著重於索引,主要用來呼叫子元件裡的屬性和方法,其實並不擅長資料傳遞。而且ref用在dom元素的時候,能使到選擇器的作用,這個功能比作為索引更常有用到。

prop使用樣例

子 export default {

name:'my_test_child',

data() {

return {

my_msg:''

props:{

msg:{

type: string,

default: '未初始化',

watch:{

// msg(val){

// console.log('監視重新整理資料');

// this.my_msg=val;

methods: {

refresh_data:function(){

console.log('#ref 主動重新整理資料');

this.my_msg=this.msg;

父父傳子 測試

type="text"

v-model="tm"

@change="myrefresh"

ref="child"

:msg="tm"

import children from './personmode/children.vue';

export default {

components:{

'mychild':children

data() {

return {

tm:''

methods: {

myrefresh:function(){

console.log('變化');

this.$refs.child.refresh_data();

vue跨域解決方法

vue專案中,前端與後台進行資料請求或者提交的時候,如果後台沒有設定跨域,前端本地除錯 的時候就會報 no access control allow origin header is present on the requested resource.這種跨域錯誤。要想本地正常的除錯,解決的辦法有三...

VUE 跨域設定

相信很多小夥伴在開發過程中遇到比較頭疼的事情之一,就是在本地與非本地環境中的介面進行聯調 至少我一廂情願的這麼認為otz 在最近的開發過程中,不可避免的,我也遇到了這個問題,畢竟在本地yy寫完 再上傳測試實在是太。蛋疼。接下來,我將就我遇到的問題以及解決方式與眾位小夥伴分享 掌聲 在此專案中,我使用...

vue實現跨域

在請求的資源上沒有 訪問控制允許源 標頭。因此,http loalhoal 8081 是不允許訪問的。出現這個報錯就說明,瀏覽器限制了跨域,需要設定跨域 一 後台更改header header access control allow origin 允許所有 訪問 header access con...