vue2 0 元件通訊 非vuex法

2022-07-16 10:27:12 字數 1066 閱讀 4541

寫在前面:

1.父元件的data寫法與子元件的data寫法不同

//

父元件data:

//子元件

data:function

()}

2.引用子元件遵循 

以下例項全部使用以下模板

父元件}

呼叫子元件

//子元件

}1.父子通訊 之 靜態資料

如果只是傳單一的字串 

....

props:['nums'] //

nums 為字串 total

這樣子元件的nums一直為total。但這種太不靈活

2.父子通訊 之 動態資料

父元件的資料將會動態傳遞給子元件

....

//props:['numa']

props:

這時當input輸入什麼,子元件的numa將會得到什麼

3.父子通訊 之 子呼叫父

}

}...

子元件執行add --> 觸發$emit --> 觸發父元件increment --> 執行 incrementtotal 方法

4.父子通訊 之 父呼叫子

呼叫子元件

}...

通過在子元件上引用ref,從而獲得子元件例項,進行相應操作。

5.子元件與子元件通訊

官網:在簡單的場景下,使用乙個空的 vue 例項作為**事件匯流排

var bus = new vue()

//

觸發元件 a 中的事件

bus.$emit('id-selected', 1)

//

在元件 b 建立的鉤子中監聽事件

bus.$on('id-selected', function

(id) )

但是這樣實在太麻煩了,建議使用vuex

vue 2 0 元件 父子元件通訊

示例 輸入框 通過this.emit input value 將將使用者的之輸出到v model繫結的值 randomid v bind value value v on input oninput 複製 export default data function methods 複製 msg 複製 ...

vue2 0元件傳值

props down emit up 嘿嘿 如果是第一次接觸vue2.0元件傳值的肯定很疑惑,這是什麼意思 大神總結的,我也就是拿來用用 down 指的是下的意思,即父元件向子元件傳值,用props up 指的是上的意思,即子元件想父元件傳值,用emit。1.子元件向父元件的傳值 child.vue...

vue2 0父子元件及非父子元件通訊

1.父元件傳遞資料給子元件 父元件資料可以通過props屬性來傳給子元件 父元件 parent msg 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 2.子元件與父元件通訊 如果子元件想要改變資料呢?這...