資訊專欄INFORMATION COLUMN
摘要：組件聲明組件分為全局的和局部的。父組件通過給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。以下實例中子組件已經(jīng)和它外部完全解耦了。
1.vue 組件-聲明
組件分為全局的和局部的。
全局聲明
Vue.component(tagName, options) **
引用組件
我們也可以在實例選項中注冊局部組件，這樣組件只能在這個實例中使用：
查看線上演示效果
-- todo
這里后期根據(jù)應(yīng)用談一下兩者的好處和實際應(yīng)用
組件的data 必須是一個函數(shù)
Vue.component("simple-counter", {
template: "",
// 技術(shù)上 data 的確是一個函數(shù)了，因此 Vue 不會警告，
// 但是我們卻給每個組件實例返回了同一個對象的引用
data: function () {
return{
counter:0
}
}
})
new Vue({
el: "#example-2"
})
2. 父子組件的傳值-props
3. 父子組件的值相互傳遞// 注冊 Vue.component("child", { // 聲明 props props: ["message"], // 同樣也可以在 vm 實例中像 "this.message" 這樣使用 template: "{{ message }}" }) // 創(chuàng)建根實例 new Vue({ el: "#app", data:{ message:"hello", } })
在 Vue 中，父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。
父組件是使用 props 傳遞數(shù)據(jù)給子組件，但如果子組件要把數(shù)據(jù)傳遞回去，就需要使用自定義事件！
我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現(xiàn)了事件接口(Events interface)，即：
使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件
另外，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。
以下實例中子組件已經(jīng)和它外部完全解耦了。它所做的只是觸發(fā)一個父組件關(guān)心的內(nèi)部事件。
{{ total }}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115914.html
摘要：組件聲明組件分為全局的和局部的。父組件通過給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。以下實例中子組件已經(jīng)和它外部完全解耦了。 1.vue 組件-聲明 組件分為全局的和局部的。 全局聲明 Vue.component(tagName, options) ** 引用組件 // 注冊 Vue.comp...
摘要：配置配置使用概率抽樣。采樣率定義了對跟蹤跨度進行采樣的概率，其值可以介于和含之間。例如，以下配置對象將采樣率更改為即每個跨度都被采樣，并使用協(xié)議將跟蹤發(fā)送到位于的服務(wù)器文件路徑注將采樣率更改為會完全禁用跟蹤。目錄手把手教你學Dapr - 1. .Net開發(fā)者的大時代手把手教你學Dapr - 2. 必須知道的概念手把手教你學Dapr - 3. 使用Dapr運行第一個.Net程序手把手教你學Da...
摘要：管理統(tǒng)一組件狀態(tài)。映射到組件將映射為也支持載荷將映射為將映射為概念允許我們將分割成模塊。每個模塊擁有自己的類似里面的針對每個組件對應(yīng)的狀態(tài)做處理的狀態(tài)的狀態(tài)對于模塊內(nèi)部的，局部狀態(tài)通過暴露出來，根節(jié)點狀態(tài)則為。 1.首先明白vuex是做什么用的。 管理統(tǒng)一組件狀態(tài)state。每個應(yīng)用將僅僅包含一個 store 實例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕...
閱讀 1751·2021-09-26 09:46
閱讀 3032·2021-09-22 15:55
閱讀 2620·2019-08-30 14:17
閱讀 3036·2019-08-26 11:59
閱讀 1819·2019-08-26 11:35
閱讀 3164·2019-08-26 10:45
閱讀 3161·2019-08-23 18:28
閱讀 1147·2019-08-23 18:21
