Vue.js components 筆記

$emit(‘事件名稱’, 要傳遞的值)

props 想像成是在子元件中，宣告變數用來接父元件的值，可以用於template、directive。

template 中不管是v-model 、 @input 、:class 都是子元件自己使用，@input 等於後為子元件methods。

update為觸發 'input' 事件就傳值給父元件。

item接字串”test”

父元件

以上範例中，子元件中宣告'obj' , 'child' 兩個變數，在directive中 有 ' : ' 代表要接父元件的值(動態)，若無 ' : ' 等於後方為字串; @後接父元件methods。

子元件

若要將父元件的值放入子元件中，需要使用watch，監聽當值改變，重新寫入從父元件來的最新值；若要監聽Object 要使用handler deep:true

傳值整理

父傳子

<components :props =”父元件data”> </components>

子元件 $watch props 傳入值 或 直接在html中使用props

子傳父

<components :props =”父元件data” @事件名稱="父元件methods name"> </components>

子元件 $methods (method name)或 $watch (監聽的data) $emit("事件名稱",傳出的值)

子元件中template @input ="子元件 methods name"

父元件 $methods '父元件methods name' 傳入值