資訊專欄INFORMATION COLUMN
摘要：除了監(jiān)聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個直接訪問子組件的應急方案，應當避免在模板或計算屬性中使用。將和合并成，會自動去判斷是普通標簽還是組件。子組件這里的狀態(tài)綁定的是父組件的數(shù)據(jù)。
查看原文站點，更多擴展內(nèi)容及更佳閱讀體驗！組件詳解 組件與復用
Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。
全局注冊
Vue.component("my-component", {});
要在父實例中使用這個組件，必須要在實例創(chuàng)建前注冊，之后就可以用
Vue.component("my-component", {
template: `這是一個組件`
});
template的DOM結(jié)構(gòu)必須被一個元素包含，缺少會無法渲染并報錯。
在Vue實例中，使用components選項可以局部注冊組件，注冊后的組件只在該實例作用域下有效。
組件中也可以使用components選項來注冊組件，使組件可以嵌套。
var Child = {
template: `局部注冊組件的內(nèi)容`
};
new Vue({
el: "#app",
components: {
"my-component": Child
},
});
Vue組件的模板在某些情況下會受到HTML的限制，比如 常見的限制元素還有 除了template選項外，組件中還可以像Vue實例那樣使用其他的選項，比如data、computed、methods等。 但是在使用data時，data必須是函數(shù)，然后將數(shù)據(jù)return出去。 JavaScript對象是引用關(guān)系，如果return的對象引用了外部的一個對象，那這個對象就是共享的，任何一方修改都會同步。 組件不僅要把模板的內(nèi)容進行復用，更重要的是組件間進行通信。 通常父組件的模板中包含子組件，父組件要正向地向子組件傳遞數(shù)據(jù)或參數(shù)，子組件接收后根據(jù)參數(shù)的不同渲染不同的內(nèi)容或者執(zhí)行操作。這個正向傳遞數(shù)據(jù)的過程通過props來實現(xiàn)。 在組件中，使用選項props聲明需要從父級接收的數(shù)據(jù)，props的值可以是兩種，一種是字符串數(shù)組，一種是對象。 props中聲明的數(shù)據(jù)與組件data函數(shù)中return的數(shù)據(jù)主要區(qū)別就是props的數(shù)據(jù)來自父級，而data中的是組件自己的數(shù)據(jù)，作用域是組件本身，這兩種數(shù)據(jù)都可以在模板template及計算屬性computed和方法methods中使用。 由于HTML特性不區(qū)分大小寫，當使用DOM模板時，駝峰命名的props名稱要轉(zhuǎn)為短橫線分割命名。 有時候，傳遞的數(shù)據(jù)并不是直接寫死，而是來自父級的動態(tài)數(shù)據(jù)，這時可以使用指令v-bind動態(tài)綁定props的值，當父組件的數(shù)據(jù)變化時，也會傳遞子組件。 這里用v-model綁定了父級的數(shù)據(jù)parentMessage，當通過輸入框任意輸入時，子組件接收到的props["message"]也會實時響應，并更新組件模板。 業(yè)務中會經(jīng)常遇到兩種需要改變prop的情況，一種是父組件傳遞初始值進來，子組件將它作為初始值保存起來，在自己的作用域下可以隨意使用和修改。這種情況可以在組件data內(nèi)再聲明一個數(shù)據(jù)，引用父組件的prop。 組件中聲明了數(shù)據(jù)count，它在組件初始化時會獲取來自父組件的initCount，之后就與之無關(guān)了，只用維護count，這樣就可以避免直接操作initCount。 另一種情況就是prop作為需要被轉(zhuǎn)變的原始值傳入，這種情況用計算屬性就可以。 因為用CSS傳遞寬度要帶單位（px），數(shù)值計算一般不帶單位，所以統(tǒng)一在組件內(nèi)使用計算屬性。 當prop需要驗證時，需要對象寫法。 一般當組件需要提供給別人使用時，推薦都進行數(shù)據(jù)驗證。比如某個數(shù)據(jù)必須是數(shù)字類型，如果傳入字符串，就會在控制臺彈出警告。 驗證的type類型可以是： String Number Boolean Object Array Function type也可以是一個自定義構(gòu)造器，使用instanceof檢測。 組件關(guān)系可分為父組件通信、兄弟組件通信、跨級組件通信。 當子組件需要向父組件傳遞數(shù)據(jù)時，就要用到自定義事件。 v-on除了監(jiān)聽DOM事件外，還可以用于組件之間的自定義事件。 JavaScript的設計模式——觀察者模式方法： dispatchEvent addEventListener Vue組件的子組件用$emit()來觸發(fā)事件，父組件用$on()來監(jiān)聽子組件的事件。 父組件也可以直接在子組件的自定義標簽上使用v-on來監(jiān)聽子組件觸發(fā)的自定義事件。 總數(shù):{{total}} 在改變組件的data "counter"后，通過$emit()再把它傳遞給父組件，父組件用@increase和@reduce。$emit()方法的第一個參數(shù)是自定義事件的名稱。 除了用v-on在組件上監(jiān)聽自定義事件外，也可以監(jiān)聽DOM事件，這時可以用.native修飾符表示監(jiān)聽時一個原生事件，監(jiān)聽的是該組件的根元素。 Vue可以在自定義組件上使用v-model指令。 組件$emit()的事件名時特殊的input，在使用組件的父級，并沒有在 v-model還可以用來創(chuàng)建自定義的表單輸入組件，進行數(shù)據(jù)雙向綁定。 總數(shù)：{{total}} 實現(xiàn)這樣一個具有雙向綁定的v-model組件要滿足下面兩個要求： 接收一個value屬性 在有新的value時觸發(fā)input事件 在實際業(yè)務中，除了父子組件通信外，還有很多非父子組件通信的場景，非父子組件一般有兩種，兄弟組件和跨多級組件。 在Vue 1.x版本中，除了$emit()方法外，還提供了￥dispatch()和$broadcast()。 $dispatch()用于向上級派發(fā)事件，只要是它的父級（一級或多級以上），都可以在Vue實例的events選項內(nèi)接收。 此實例只在Vue 1.x版本中有效： {{message}} $broadcast()是由上級向下級廣播事件，用法完全一致，方向相反。 這兩種方法一旦發(fā)出事件后，任何組件都可以接收到，就近原則，而且會在第一次接收到后停止冒泡，除非返回true。 這些方法在Vue 2.x版本中已廢棄。 在Vue 2.x中，推薦任何一個空的Vue實例作為中央事件總線（bus），也就是一個中介。 {{message}} 首先創(chuàng)建了一個名為bus的空的Vue實例；然后全局定義了組件component-a；最后創(chuàng)建了Vue實例app。 在app初始化時，也就是在生命周期mounted鉤子函數(shù)里監(jiān)聽了來自bus的事件on-message，而在組件component-a中，點擊按鈕后會通過bus把事件on-message發(fā)出去。此時app就會接收到來自bus的事件，進而在回調(diào)里完成自己的業(yè)務邏輯。 這種方法巧妙而輕量地實現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級。 如果深入使用，可以擴展bus實例，給它添加data、methods、computed等選項，這些都是可以公用的。 在業(yè)務中，尤其是協(xié)同開發(fā)時非常有用，因為經(jīng)常需要共享一些通用的信息，比如用戶登錄的昵稱、性別、郵箱等，還有用戶的授權(quán)token等。 只需在初始化時讓bus獲取一次，任何時間、任何組件就可以從中直接使用，在單頁面富應用（SPA）中會很實用。 除了中央事件總線bus外，還有兩種方法可以實現(xiàn)組件間通信：父鏈和子組件索引。 在子組件中，使用this.$parent可以直接訪問該組件的父實例或組件，父組件也可以通過this.$children訪問它所有的子組件，而且可以遞歸向上或向下無限訪問，直到根實例或最內(nèi)層的組件。 {{message}} 盡管Vue允許這樣操作，但在業(yè)務中，子組件應該盡可能地避免依賴父組件的數(shù)據(jù)，更不應該去主動修改它的數(shù)據(jù)，因為這樣使得父子組件緊耦合，只看父組件，很難理解父組件的狀態(tài)，因為它可能被任意組件修改，理想狀態(tài)下，只有組件自己能修改它的狀態(tài)。 父子組件最好還是通過props和$emit()來通信。 當子組件較多時，通過this.$children來遍歷出需要的一個組件實例是比較困難的，尤其是組件動態(tài)渲染時，它們的序列是不固定的。 Vue提供了子組件索引的方法，用特殊的屬性ref來為子組件指定一個索引名稱。 在父組件模板中，子組件標簽上使用ref指定一個名稱，并在父組件內(nèi)通過this.$refs來訪問指定名稱的子組件。 Vue 2.x將v-el和v-ref合并成ref，Vue會自動去判斷是普通標簽還是組件。 當需要讓組件組合使用，混合父組件的內(nèi)容與子組件的模板時，就會用到slot，這個過程叫做內(nèi)容分發(fā)。
props傳遞數(shù)據(jù)、events觸發(fā)事件和slot內(nèi)容分發(fā)就構(gòu)成了Vue組件的3個API來源，再復雜的組件也是由這3部分構(gòu)成。 父組件中的模板： 這里的message就是一個slot，但是它綁定的是父組件的數(shù)據(jù)，而不是組件 父組件模板的內(nèi)容是在父組件作用域內(nèi)編譯，子組件模板的內(nèi)容是在子組件作用域內(nèi)編譯。 這里的狀態(tài)showChild綁定的是父組件的數(shù)據(jù)。 在子組件上綁定數(shù)據(jù)： 因此，slot分發(fā)的內(nèi)容，作用域是在父組件上。 在子組件內(nèi)使用特殊的 分發(fā)的內(nèi)容 更多分發(fā)的內(nèi)容 如果沒有父組件插入內(nèi)容，我將作為默認出現(xiàn)。 子組件child-component的模板內(nèi)定義了一個 作為默認的內(nèi)容，在父組件沒有使用slot時，會渲染這段默認的文本；如果寫入了slot，就會替換整個 給 正文的內(nèi)容 更多正文的內(nèi)容 子組件內(nèi)聲明了3個 如果沒有指定默認的匿名slot，父組件內(nèi)多余的內(nèi)容都將被拋棄。 在組合使用組件時，內(nèi)容分發(fā)API至關(guān)重要。 作用域插槽是一種特殊的slot，使用一個可以復用的模板替換已渲染元素。 來自父組件的內(nèi)容 {{props.msg}} 子組件的模板，在 父組件中使用了元素，而且擁有一個scope="props"的特性，這里的props是一個臨時變量。 template內(nèi)可以通過臨時變量props訪問來自子組件插槽的數(shù)據(jù)msg。 作用域插槽更具代表性的用例是列表組件，允許組件自定義應該如何渲染列表每一項。 子組件my-list接收一個來自父級的prop數(shù)組books，并且將它在name為book的slot上使用v-for指令循環(huán)，同時暴露一個變量bookName。 作用域插槽的使用場景是既可以復用子組件的slot，又可以使slot內(nèi)容不一致。 Vue 2.x提供了用來訪問被slot分發(fā)的內(nèi)容的方法$slots。 正文的內(nèi)容 更多正文的內(nèi)容 通過$slots可以訪問某個具名slot,this.$slots.default包括了所有沒有被包含在具名slot中的節(jié)點。 給組件設置name選項，組件在它的模板內(nèi)可以遞歸地調(diào)用自己。 組件遞歸使用可以用來開發(fā)一些具有未知層級關(guān)機的獨立組件，比如級聯(lián)選擇器和樹形控件等。 組件的模板一般都是在template選項內(nèi)定義的，Vue提供了一個內(nèi)聯(lián)模板的功能，在使用組件時，給組件標簽使用inline-template特性，組件就會把它的內(nèi)容當做模板，而不是把它當內(nèi)容分發(fā)，這讓模板更靈活。 {{message}} {{msg}} 在父組件中聲明的數(shù)據(jù)message和子組件中聲明的數(shù)據(jù)msg，兩個都可以渲染（如果同名，優(yōu)先使用子組件的數(shù)據(jù)）。這是內(nèi)聯(lián)模板的缺點，就是作用域比較難理解，如果不是非常特殊的場景，建議不要輕易使用內(nèi)聯(lián)模板。 Vue.js提供了一個特殊的元素 可以直接綁定在組件對象上： Welcome home! Vue.js允許將組件定義為一個工廠函數(shù)，動態(tài)地解析組件。 Vue.js只在組件需要渲染時觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染。 工廠函數(shù)接收一個resolve回調(diào)，在收到從服務器下載的組件定義時調(diào)用。也可以調(diào)用reject(reason)指示加載失敗。 異步更新隊列 Vue在觀察到數(shù)據(jù)變化時并不是直接更新DOM，而是開啟一個隊列，并緩沖在同一個事件循環(huán)中發(fā)生的所有數(shù)據(jù)變化。在緩沖時會去除重復數(shù)據(jù)，從而避免不必要的計算和DOM操作。然后，在一下個事件循環(huán)tick中，Vue刷新隊列并執(zhí)行實際（已去重的）工作。 Vue會根據(jù)當前瀏覽器環(huán)境優(yōu)先使用原生的Promise.then和MutationObserver，如果都不支持，就會采用setTimeout代替。 $nextTick就是用來確定什么時候DOM更新已經(jīng)完成。 Vue提供了另一種定義模板的方式，在
在一些非常特殊的情況下，需要動態(tài)地創(chuàng)建Vue實例，Vue提供了Vue.extend和$mount兩個方法來手動掛載一個實例。 Vue.extend是基礎(chǔ)Vue構(gòu)造器，創(chuàng)建一個“子類”，參數(shù)是一個包含組件選項的對象。 如果Vue實例在實例化時沒有收到el選項，它就處于“未掛載”狀態(tài)，沒有關(guān)聯(lián)的DOM元素。可以使用$mount手動地掛載一個未掛載的實例。這個方法返回實例自身，因而可以鏈式調(diào)用其他實例方法。 除了以上寫法外，還有兩種寫法： 手動掛載實例（組件）是一種比較極端的高級用法，在業(yè)務中幾乎用不到，只在開發(fā)一些復雜的獨立組件時可能會使用。 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108008.html 摘要：父子組件通信兄弟組件通信跨級組件通信父傳子子組件用接收，父組件用發(fā)送父組件紅樓夢西游記三國演義水滸傳子組件子傳父子組件用有的版本名稱只能小寫發(fā)送，父組件自定義事件然后在方法中接收父組件不能加括號子組件點擊把傳給父組件可以傳
父子組件通信： props、 $parent / $children、 provide / inject 、 ref 、 $attrs / $listeners
... 摘要：實例化發(fā)生了什么詳解生命周期本文將對的生命周期進行詳細的講解讓你了解一個實例的誕生都經(jīng)歷了什么我在上建立了一個存放筆記的倉庫以后會陸續(xù)更新一些知識和項目中遇到的坑有興趣的同學可以去看看哈歡迎傳送門實例化一個這是一個方法觸發(fā)鉤子函數(shù)組件實例剛
實例化vue發(fā)生了什么?(詳解vue生命周期)
本文將對vue的生命周期進行詳細的講解,讓你了解一個vue實例的誕生都經(jīng)歷了什么~
我在Githu... 摘要：指令帶有前綴，以表示它們是提供的特殊屬性。最后，我們需要為賦值世界舞王尼古拉斯趙四世界舞王尼古拉斯趙四初學就到這里了，相信你已經(jīng)在腦子里確定了的原理的概念也已經(jīng)非常清楚了，希望你能夠在學習的道路上越走越遠，最后感謝你的瀏覽。
vue.js
vue介紹
Vue.js（讀音 /vju?/，類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量... 摘要：在這一步，實例已完成以下的配置數(shù)據(jù)觀測，屬性和方法的運算，事件回調(diào)。可以直接寫等標簽的寫法之前會的工程師上手框架的成本較低
簡介
1.美團工程師推出的基于Vue.js封裝的用于開發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點3.可完全組件化開發(fā)
特點
1.組件化開發(fā)2.完成的Vue.js開發(fā)體驗(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構(gòu)建項目5.最終H5... 摘要：事件總線事件總線首先創(chuàng)建了一個名為的空的實例然后全局定義了組件最后創(chuàng)建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。
學習筆記：組件詳解
組件詳解
組件與復用
Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。
全局注冊
Vue.component(my-component, {});
要在父實例中使用這個組件，必須要... 閱讀 1661·2021-09-26 09:55 閱讀 5277·2021-09-22 15:40 閱讀 2021·2019-08-30 15:53 閱讀 1504·2019-08-30 11:15 閱讀 1723·2019-08-29 15:41 閱讀 1878·2019-08-28 18:13 閱讀 3154·2019-08-26 12:00 閱讀 1677·2019-08-26 10:30內(nèi)規(guī)定只允許是
、 、 等這些表格元素，所以在 內(nèi)直接使用組件時無效的。這種情況下，可以使用特殊的is屬性來掛載組件。
Vue.component("my-component", {
template: `
這里是組件內(nèi)容`
});
、
、。
{{message}}`,
props: ["message"],
template: `{{message}}`,
data: {
parentMessage: ""
}
Vue.component("my-component", {
props: ["initCount"],
template: `{{count}}`,
data() {
return {
count:this.initCount
}
}
});
Vue.component("my-component", {
props: ["width"],
template: `組件內(nèi)容`,
computed: {
style: function () {
return {
width: this.width + "px"
}
}
}
});
在JavaScript中對象和數(shù)組時引用類型，指向同一個內(nèi)存空間，所以props是對象和數(shù)組時，在子組件內(nèi)改變是會影響父組件。
數(shù)組驗證
Vue.component("my-component", {
props: {
// 必須是數(shù)字
propA: Number,
// 必須是字符串或數(shù)字類型
propB: [String, Number],
// 布爾值，如果沒有定義，默認值是true
propC: {
type: Boolean,
default: true
},
// 數(shù)字，而且是必傳
propD: {
type: Number,
default: true
},
// 如果是數(shù)組或?qū)ο螅J值必須是一個函數(shù)來返回
propE: {
type: Array,
default: function () {
return []
}
},
// 自定義一個驗證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
}
});
Vue.component("my-component", {
template: `
`,
data() {
return {
counter: 0
}
},
methods: {
handleIncrease: function () {
this.counter++;
this.$emit("increase", this.counter);
},
handlereduce: function () {
this.counter--;
this.$emit("reduce", this.counter)
}
}
});
new Vue({
el: "#app",
data: {
total: 0
},
methods: {
handleGetTotal: function (total) {
this.total = total;
}
}
});
使用v-model
Vue.component("my-component", {
props: ["value"],
template: ``,
methods: {
updateValue: function () {
this.$emit("input", event.target.value)
}
}
});
new Vue({
el: "#app",
data: {
total: 10
},
methods: {
handleReduce: function () {
this.total--;
}
}
});
Vue.component("my-component", {
template: ``,
methods: {
handleDispatch: function () {
this.$dispatch("on-message", "來自內(nèi)部組件的數(shù)據(jù)")
}
}
});
new Vue({
el: "#app",
data: {
message: ""
},
events: {
"on-message": function (msg) {
this.message = msg;
}
}
});
var bus = new Vue();
Vue.component("component-a", {
template: ``,
methods: {
handleEvent: function () {
bus.$emit("on-message", "來自組件component-a的內(nèi)容")
}
}
});
var app = new Vue({
el: "#app",
data: {
message: ""
},
mounted: function () {
var _this = this;
// 在實例初始化時，監(jiān)聽來自bus實例的事件
bus.$on("on-message", function (msg) {
_this.message = msg;
})
}
});
Vue.component("component-a", {
template: ``,
methods: {
handleEvent: function () {
this.$parent.message = "來自組件component-a的內(nèi)容"
}
}
});
var app = new Vue({
el: "#app",
data: {
message: ""
}
});
Vue.component("component-a", {
template: `子組件`,
data() {
return {
message: "子組件內(nèi)容"
}
},
});
var app = new Vue({
el: "#app",
methods: {
handleRef: function () {
// 通過$refs來訪問指定的實例
var msg = this.$refs.comA.message;
console.log(msg);
}
}
});
$refs只在組件渲染完成后才填充，并且它是非響應式的。它僅僅作為一個直接訪問子組件的應急方案，應當避免在模板或計算屬性中使用$refs。
Vue.component("child-component", {
template: `子組件1`,
});
var app = new Vue({
el: "#app",
data: {
showChild: true
}
});
Vue.component("child-component", {
template: `子組件`,
data() {
return {
showChild: true
}
}
});
var app = new Vue({
el: "#app",
});
Vue.component("child-component", {
template: `
`,
});
var app = new Vue({
el: "#app",
});
子組件
具名Slot
Vue.component("child-component", {
template: `
標題
底部信息
`,
});
var app = new Vue({
el: "#app",
});
內(nèi)的
Vue.component("my-component", {
template: `#my-component`,
});
var app = new Vue({
el: "#app",
});
手動掛載實例
Vue.component("child-component", {
template: `
`,
});
var app = new Vue({
el: "#app",
});
Vue.component("my-list", {
props: {
books: {
type: Array,
default: function () {
return [];
}
}
},
template: `
`,
});
Vue.component("child-component", {
template: `
標題
底部信息
`,
mounted: function () {
var header = this.$slots.header;
var main = this.$slots.default;
var footer = this.$slots.footer;
console.log(footer);
console.log(footer[0].elm.innerHTML);
}
});
var app = new Vue({
el: "#app",
});
Vue.component("child-component", {
name: "child-component",
props: {
count: {
type: Number,
default: 1
}
},
template: `
`,
});
Vue.component("child-component", {
data() {
return {
msg: "在子組件中聲明的數(shù)據(jù)"
}
}
});
var app = new Vue({
el: "#app",
data: {
message: "在父組件中聲明的數(shù)據(jù)"
}
});
在父組件中定義子組件的模板
var app = new Vue({
el: "#app",
data: {
currentView: "comA"
},
components: {
comA: {
template: `組件A`
},
comB: {
template: `組件B`
},
comC: {
template: `組件C`
},
},
methods: {
handleChangeView: function (component) {
this.currentView = "com" + component
}
}
});
異步組件
var Home = {
template: `
Vue.component("child-component", function (resolve, reject) {
window.setTimeout(function () {
resolve({
template: `我是異步渲染的！`
})
}, 1000)
});
var app = new Vue({
el: "#app",
});
X-Templates
var app = new Vue({
el: "#app",
data: {
showDiv: false
},
methods: {
getText: function () {
this.showDiv = true;
this.$nextTick(function () {
var text = document.getElementById("div");
console.log(text.innerHTML);
})
}
}
});這是一段文本
var MyComponent = Vue.extend({
template: `
Hello {{name}}`,
data() {
return {
name: "Andy"
}
}
});
new MyComponent().$mount("#app");new MyComponent().$mount("#app");
new MyComponent({
el: "#app"
})
相關(guān)文章
Vue 組件通信詳解
實例化vue發(fā)生了什么?(詳解vue生命周期)
Vue.js基礎(chǔ)詳解
詳解 mpvue 小程序框架 及和原生的差異
Vue.js-組件詳解
發(fā)表評論
0條評論
dadong
男|高級講師
TA的文章
閱讀更多
工作3年，感覺自己一直在從事無效的軟件測試工作
如何知道主機名-怎樣查找計算機的主機名？
jQuery入門教程-文檔操作方法
怎么修改input、textarea元素中的placeholder屬性樣式
css學習筆記（一）
CSS > 選擇器優(yōu)先級與效率優(yōu)化
Vue-組件詳解
node---(1)創(chuàng)建一個node服務器
最新活動
閱讀需要支付1元查看
