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