vue2 0元件通訊各種情況總結與例項分析

2021-07-28 02:39:21 字數 1199 閱讀 1036

在vue中元件是實現模組化開發的主要內容,而元件的通訊更是vue資料驅動的靈魂,現就四種主要情況總結如下:

//html

注意命名規定:僅在html內使用my-messagei>

my-message="元件內部資料傳遞">

child>

div>

//js

vue.component('child', }'

});new vue()

script>

v-model="parentmsg">

:parent-msg="parentmsg">

child>

div>

vue.component('child', }'

});new vue(

})script>

自定義事件的根基在於每個vue例項都實現了事件介面(event inte***ce)

vue的事件系統分離自瀏覽器的eventtarget api。儘管它們的執行類似,但是$on 和 $emit 不是addeventlistener 和 dispatchevent 的別名。

父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件

display>

increment>

div>

var bus = new vue();

vue.component('increment',

},methods:

}});

vue.component('display', } times`,

data: function ()

},created: function () );

bus.$on('inc', (num) =>

this.c = num);}

});vm = new vue()

script>

總結:vue中關於元件間及元件與根節點間通訊都可以人為是父子兄弟間的通訊,另外父子關係是相對的即與上下文有關(比如a元件的父元件可能是b元件的子元件);上述四個例子分別演示了不同元件通訊的機制。

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 元件通訊 非vuex法

寫在前面 1.父元件的data寫法與子元件的data寫法不同 父元件data 子元件 data function 2.引用子元件遵循 以下例項全部使用以下模板 父元件 呼叫子元件 子元件 1.父子通訊 之 靜態資料 如果只是傳單一的字串 props nums nums 為字串 total 這樣子元件...

vue2 0元件傳值

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