元件的動態切換及父子元件之間的通訊

2021-10-21 06:26:28 字數 1303 閱讀 5969

我們常常通過例如單標籤的方式顯示,這種方式元件是靜態的。

實現動態元件的方式:使用標籤的方式。

例如:我們可以通過事件觸發的方式來實現元件的切換。

="home"

>

//通過事件觸發的方式來動態的改變元件

"change(1)"

>comname1<

/button>

"change(2)"

>comname2<

/button>

//實現動態元件的方式,comname是乙個變數。

"comname"

/>

<

/div>

<

/template>

import comname1 from

'../components/comname1.vue'

import comname2 from

'../components/comname2.vue'

export

default

,data()

},methods:

else

this

.comname=

'comname2';}

}}<

/script>

在父元件中給呼叫的子元件標籤上新增屬性,屬性的值是傳遞的引數。

在子元件中使用props屬性接收引數。

例:

# 父元件 father.vue

//將引數傳遞給子元件

"info" @lhh-data=

"handlecompdata"

/>

import son from

'../components/son'

export

default

,data()

},}#子元件 son.vue

這是父元件傳遞的引數:

}<

/h2>

export

default},

}

# 子元件 son.vue

"handleclick"

> click<

/button>

export

default},

methods:}}

# 父元件 father.vue

//通過***來獲取子元件傳遞的引數

"handlecompdata"

/>

methods:

}

Vue元件 父子元件之間的通訊

最近在學習vue,元件之間的通訊是難點也是重點,所以想稍微總結一下。由於元件的模板無法使用父元件中的資料,所以需要用到props。prop 是你可以在元件上註冊的一些自定義特性。當乙個值傳遞給乙個 prop 特性的時候,它就變成了那個元件例項的乙個屬性。在子元件中註冊了props後,就能將父元件的資...

Vue 父子元件及同級元件之間的傳值

1.父元件 father.vue 數值 2.子元件1 son1.vue 向兄弟元件傳值 向father元件傳值 3.子元件2 son2.vue 數值 4.事件匯流排 同級元件傳值時,需要新增 資料匯流排 在src assets 下建立乙個eventbus.js,內容如下 eventbus中我們只建立...

父子元件之間的通訊

父向子元件傳參 父元件直接定義屬性 msg 和屬性值 something interesting 子元件想要取得父元件中定義的屬性值 something interesting 在子元件中定義props,屬性名 msg 在陣列中 子元件即可得到該引數 this.msg 子向父元件傳參 在compon...