vue 元件傳參

2021-10-24 16:17:43 字數 2573 閱讀 5104

我們通常把路由直接對映(繫結)的元件稱為 路由元件,也只有路由元件才能直接呼叫路由有關物件:$router$route

當我們乙個元件即希望作為路由元件使用,又可能作為功能元件(某個頁面中的一部分)去使用,這個時候路由元件傳參的方式來做到這點

*1.父元件向子元件傳遞引數(還可以傳遞函式) ====》props*

父元件通過自定義屬性的方式傳給子元件(:parentmsg=」msg」),子元件用props接受(props:[「parentmsg」])
"mag"

>

<

/ahead>

newvue(}

)

vue.

component

("ahead"

, template:

`<}+

` }

)

如果你想看到錯誤,你要用vue的非壓縮版

vue.

component

("example",,

// 數字有預設值

propd:

,// 陣列、預設值是乙個工廠函式返回物件

prope:;}

},// 自定義驗證函式

propf:}}

});

事件繫結機制:父元件通過自定義事件的方式向子元件傳遞方法(@mymsg=「show」),子元件用this.emi

t()接

受(th

is

.emit()接受(this.

emit()

接受(t

his.

emit(fun,引數1,引數2)),引數可以是子元件的,順便傳給父元件,實現子元件向父元件傳值

"get"

>

<

/aaa>

//子元件

var a=},

methods:},

template:``

}}//父元件

newvue(,

methods:},

components:

})

3.元件之間相互傳參 原生事件法

var event=

newvue()

; event.

$emit

(自定義事件名,引數1,引數2...

) 傳送引數

event.

$on(自定義事件名,()

=>

) 接收引數

全域性:var event=

newvue()

;元件1:

methods:},

元件2:methods:},

元件3:

mounted()

)event.

$on(

"mymsgtwo"

,function

(two)

.bind

(this))

;},

4.$parent 獲取父元素的資料/方法

$root 獲取根元件的資料/方法

$children 獲取子元素的資料/方法(mounted鉤子函式,要有下標)

$refs 獲取子元件的方法和資料/作用2:獲取dom元素

(一定要使用 ref屬性)

<

!doctype html>

"utf-8"

>

<

/title>

"js/vue.js"

>

<

/script>

<

/head>

>

"one" @click.native=

"show"

>

<

/ahead>

>

內容<

/h1>

"getchild"

>獲取子元素<

/button>

<

/div>

"head"

>

}<

/h1>

}"getfar"

>獲取父元素<

/button>

<

/div>

<

/template>

var ahead=},

methods:},

template:

"#head"

}var vm=

newvue(,

methods:

,getchild()

},components:})

<

/script>

<

/body>

<

/html>

vue元件傳參

負值元件的定義有兩種,我稱為常規父子元件和特殊父子元件。1.1 常規父子元件 將其他元件以import引入用自定義標籤接收,在當前元件中component裡註冊該標籤,頁面上可以直接用 自定義標籤 引入子元件 註冊子元件 使用子元件 1.2 特殊父子元件 在路由中定義好元件,元件中含有childre...

Vue元件傳參

通常,父元件的模板中包含子元件,父元件要正向地向子元件傳遞資料或引數,子元件收到後根據引數的不同來渲染不同的內容,或者執行操作。這個正向傳遞資料的過程是通過props來實現的。在元件中,子元件使用props來宣告需要從父元件接受的資料。但是父元件不能向子元件傳遞資料。需要注意的是 在 js中物件和陣...

vue傳參,元件之間傳參 路由傳參 vuex

詳見 兩種情況 params 和 query 都可以在目標元件的生命週期裡,通過 this.route 進行獲取 例 首頁中精選主題的路由傳參 精選主題 1 簡單舉例 a 一般會新建 store 資料夾,在 index.js 初始化 vuex b 在 main.js 中,引入 c 例如,在我的頁面修...