Vue之元件與父子傳值

2022-04-11 10:26:50 字數 1057 閱讀 6771

vue中,乙個vue檔案稱為乙個元件(包括html,css,js)

元件的命名必須大寫(防止和標籤重名)

元件中的data必須是乙個函式

下圖中,vheader.vue

提高**的重用性

1.先導入元件

2.以標籤的形式寫到父元件中

父級往子級傳值:

1.在子元件的props進行驗證

如果驗證的資料型別不一致,控制台會報錯

再將資料渲染到標籤中

2.給父元件的子元件標籤設定自定義的屬性

子級往父級傳值:

1.在子元件中觸發自定義的事件

this.$emit('自定義的事件名',傳值引數);

2.在父元件的子元件標籤中設定自定義事件

addmenu:自定義的事件名

addhandler:在當前元件中methods裡面宣告的事件

......

methods:

}

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...

父子組建傳值 vue 父子元件傳值

父元件傳給子元件 子元件通過props方法接收資料 子元件傳給父元件 通過 emit方法傳遞引數 一 props方法 1.靜態傳值 父元件中子元件的標籤設定乙個自定義屬性並賦值 子元件中通過props方法接收 export default 2.動態傳值 根據父元件中值的變化,動態改變子元件中的值 父...

vue父子元件傳值

一.父元件傳給子元件 父元件是parent.vue,子元件是children.vue。1.父元件引入子元件模組,在parent.vue的script中寫以下 並在components中註冊該元件 import centerfigner from components children 在templa...