vue之元件通訊

vue元件通訊一般分為以下幾種情況：

1、父子元件通訊；

2、兄弟元件通訊；

3、跨多層級元件通訊；

一、父子通訊

父元件通過props傳遞資料給子元件，子元件通過emit傳送事件傳遞資料給父元件。

父元件和子元件通訊

父元件如下：

<
template
>
<
div 
class
="parent"
>
<
div 
id>
<
child 
v-bind:message
="parentmsg"
>
child
>
div>
div>
template
>
<
script
>
import child from 
'./components/child
'export 
default
,          data()}}
script
>

子元件如下：

<
template
>
<
div 
class
="child"
>
<
h2>child子元件部分
h2>
<
p>}
p>
div>
template
>
<
script
>
export 
default
script
>

子元件接收的方法有三種方式：

第一種，直接接收：

props: ['childcom']

第二種，已物件的形式設定接收型別：

props:

第三種，已物件的形式設定接收型別和預設值：

props: 
}

子元件和父元件通訊子元件**：

父元件**：

兄弟元件通訊

兄弟元件也是使用$emit('事件名稱，'需要傳遞的資料')，作為傳送資料的一方和$on(事件名稱"，'**函式') 作為接收資料的一方。

首先在scr資料夾下，新建乙個檔案event.js,然後在裡面新建乙個vue例項。這個例項的作用就是作為兄弟元件間的橋梁，也就是**事件中線。

然後建兩個兄弟元件，元件**分別如下：

兄弟元件一：

兄弟元件二：

這個是在vue 2.2版本新增的apiprovide / inject雖然文件中不推薦直接在業務中使用，但是如果用得好的話，還是很有用的。

假設有父元件 a，然後有乙個跨多層級的子元件 b

Vue 元件通訊之EvemtBus

定義乙個排程器，其實就是new乙個vue。讓這個排程器承載事件，也就是使用上面的兩個方法。emit 觸發事件 on 監聽事件第一步，專案目錄新建乙個bus.jsimport vue from vue const bus newvue export default bus 第二步，main.js裡往...

VUE之元件間通訊

1.1 父元件向子元件傳值父元件中父元件 cityid cityid children template export default script 子元件子元件 div template export default script 1.2 子元件向父元件傳值父元件父元件 cityid c...

vue元件通訊之provide inject

什麼是 provide inject 傳送門 vue的元件通訊方式我們熟知的有 props emit bus vuex 另外就是 provide inject provide inject 是 vue.js 2.2.0 版本後新增的 api，在文件中這樣介紹這對選項需要一起使用，以允許乙個祖先元件...

vue之元件通訊

Vue 元件通訊之EvemtBus

VUE之元件間通訊

vue元件通訊之provide inject

相關推薦