資訊專欄INFORMATION COLUMN
摘要：構(gòu)造器有一個選項對象，選項對象的屬性用于定義組件要渲染的。使用注冊組件時，需要提供個參數(shù)，第個參數(shù)時組件的標簽，第個參數(shù)是組件構(gòu)造器。方法內(nèi)部會調(diào)用組件構(gòu)造器，創(chuàng)建一個組件實例。
什么叫組件：
有結(jié)構(gòu)HTML 有樣式CSS 有交互（效果） 行為 信號量存數(shù)據(jù)組件的行為可以定制？
通過屬性設置在Vue中有什么樣的組件(組件進行分類)：
實現(xiàn)基本功能的基礎的組件（最小的元素） 可復用的邏輯組件（業(yè)務組件）頁面組件
頁面上所有的東西全都是組件：形成了組件樹理解組件的創(chuàng)建和注冊
我們用以下幾個步驟來理解組件的創(chuàng)建和注冊：
Vue.extend()是Vue構(gòu)造器的擴展，調(diào)用Vue.extend()創(chuàng)建的是一個組件構(gòu)造器，而不是一個具體的組件實例。
Vue.extend()構(gòu)造器有一個選項對象，選項對象的template屬性用于定義組件要渲染的HTML。
使用Vue.component()注冊組件時，需要提供2個參數(shù)，第1個參數(shù)時組件的標簽，第2個參數(shù)是組件構(gòu)造器。
Vue.component()方法內(nèi)部會調(diào)用組件構(gòu)造器，創(chuàng)建一個組件實例。
組件應該掛載到某個Vue實例下，否則它不會生效。
組件的使用需要使用Vue.extend方法創(chuàng)建一個組件，然后使用Vue.component方法注冊組件。Vue.extend方法格式如下：
var MyComponent = Vue.extend({
// 選項...后面再介紹
})
使用Vue.component(tagName, options)方法注冊組件:
Vue.component("my-component", {
// 選項
})
組件在注冊之后，即可在HTML標簽中使用這個組件名稱，像使用DOM元素一樣。
下面看一個例子:
// 定義
var MyComponent = Vue.extend({
template: "A custom component!"
})
// 注冊
Vue.component("my-component", MyComponent)
// 創(chuàng)建根實例
new Vue({
el: "#example"
})
局部注冊
你不必把每個組件都注冊到全局。你可以通過某個 Vue 實例/組件的實例選項 components 注冊僅在其作用域中可用的組件：
var Child = {
template: "A custom component!"
}
new Vue({
// ...
components: {
// 將只在父組件模板中可用
"my-component": Child
}
})
父組件和子組件
我們可以在組件中定義并使用其他組件，這就構(gòu)成了父子組件的關(guān)系.
我們分幾個步驟來理解這段代碼：
var Child = Vue.extend(...)定義一了個Child組件構(gòu)造器
var Parent = Vue.extend(...)定義一個Parent組件構(gòu)造器
components: { "child-component": Child }，將Child組件注冊到Parent組件，并將Child組件的標簽設置為child-component。
template :"
This is a Parent component
以上組件注冊的方式有些繁瑣，Vue.js為了簡化這個過程，提供了注冊語法糖
使用Vue.component()直接創(chuàng)建和注冊組件：
// 全局注冊，my-component1是標簽名稱
Vue.component("my-component1",{
template: "This is the first component!"
})
var vm1 = new Vue({
el: "#app1"
})
Vue.component()的第1個參數(shù)是標簽名稱，第2個參數(shù)是一個選項對象，使用選項對象的template屬性定義組件模板。
使用這種方式，Vue在背后會自動地調(diào)用Vue.extend()。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/89716.html
摘要：組件基礎與通信一腳手架簡介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實現(xiàn)祖先組件和后代組件之間通信。 Vue組件基礎與通信 一、vue cli腳手架 ① vue cli 簡介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經(jīng)全局安裝了舊版本的...
摘要：事件總線事件總線首先創(chuàng)建了一個名為的空的實例然后全局定義了組件最后創(chuàng)建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。 學習筆記：組件詳解 組件詳解 組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...
摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。 之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...
摘要：官方推薦的風格指南個人筆記最近剛注意到官方多了一個風格指南的推薦。中始終用組件命名因為官方推薦風格命名，所以能用就用組件命名單詞應該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點。 Vue官方推薦的風格指南-個人筆記 最近剛注意到vue官方多了一個vue風格指南的推薦。 因為業(yè)務中一直用的vue，所以梳理學習一下，來增加自己代碼的規(guī)范性，效果不錯也可以安利到團隊。 文檔沒有對JS...
閱讀 961·2023-04-25 19:40
閱讀 3583·2023-04-25 17:41
閱讀 3067·2021-11-11 11:01
閱讀 2740·2019-08-30 15:55
閱讀 3284·2019-08-30 15:44
閱讀 1427·2019-08-29 14:07
閱讀 535·2019-08-29 11:23
閱讀 1384·2019-08-27 10:54
