Vue父子傳值這樣理解就對了

2021-10-10 17:48:40 字數 724 閱讀 4273

每乙個vue例項都是乙個根元件,基於根元件,我們才能建立子元件,即便子元件是定義在全域性裡,可是使用的時候元件標籤還是要加在vue例項管轄的區域。

所以不管是全域性元件和區域性元件,都是子元件,而且在vue中,元件只有父子元件和非父子元件之分,

今天跟大家聊聊如何理解父子傳值這一概念。

1.父子傳值,首先父元件準備資料。

const vm = new vue(

})

2.建立子元件,這裡設定全域性元件

vue.component('demo',)
demo就是我們的元件名,template後面跟的是模板字串(es6語法),放的是元件內容。

3.子元件標籤寫在div裡,給元件標籤動態繫結屬性,屬性值就是父元件data裡面的引數值,(這個是重點),父傳子,父元件只認元件標籤的動態屬性值,所以,這兩個值務必保持一致

4.子元件最後要在自己結構中,加上props這個屬性,後面是乙個陣列,裡面放的是自己動態繫結的屬性名,屬性名,子元件用的是屬性名,和父元件要區分開。

vue.component('demo',)
看效果

完整**獻上:

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

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

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

vue父子元件進行傳值 vue中的父子元件,什麼是父元件什麼是子元件呢?就跟html標籤一樣,誰包裹著誰誰就是父元件,被包裹的元素就是子元件。父元件向子元件傳值 下面用的script引入的方式,那種vue cli搭建的同理 父元件通過 v bind 屬性名 自定義的 要傳遞的資料 子元件通過 pro...

vue父子元件傳值

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