成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue組件

tianlai / 1609人閱讀

摘要：構(gòu)造器有一個(gè)選項(xiàng)對(duì)象，選項(xiàng)對(duì)象的屬性用于定義組件要渲染的。使用注冊(cè)組件時(shí)，需要提供個(gè)參數(shù)，第個(gè)參數(shù)時(shí)組件的標(biāo)簽，第個(gè)參數(shù)是組件構(gòu)造器。方法內(nèi)部會(huì)調(diào)用組件構(gòu)造器，創(chuàng)建一個(gè)組件實(shí)例。

什么叫組件： 
有結(jié)構(gòu)HTML
有樣式CSS
有交互（效果）
行為
信號(hào)量存數(shù)據(jù)
組件的行為可以定制？ 
通過屬性設(shè)置
在Vue中有什么樣的組件(組件進(jìn)行分類)： 
實(shí)現(xiàn)基本功能的基礎(chǔ)的組件（最小的元素）
可復(fù)用的邏輯組件（業(yè)務(wù)組件）
頁面組件 
頁面上所有的東西全都是組件：形成了組件樹
理解組件的創(chuàng)建和注冊(cè)

我們用以下幾個(gè)步驟來理解組件的創(chuàng)建和注冊(cè)：

Vue.extend()是Vue構(gòu)造器的擴(kuò)展，調(diào)用Vue.extend()創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例。

Vue.extend()構(gòu)造器有一個(gè)選項(xiàng)對(duì)象，選項(xiàng)對(duì)象的template屬性用于定義組件要渲染的HTML。

使用Vue.component()注冊(cè)組件時(shí)，需要提供2個(gè)參數(shù)，第1個(gè)參數(shù)時(shí)組件的標(biāo)簽，第2個(gè)參數(shù)是組件構(gòu)造器。

Vue.component()方法內(nèi)部會(huì)調(diào)用組件構(gòu)造器，創(chuàng)建一個(gè)組件實(shí)例。

組件應(yīng)該掛載到某個(gè)Vue實(shí)例下，否則它不會(huì)生效。

組件的使用

需要使用Vue.extend方法創(chuàng)建一個(gè)組件，然后使用Vue.component方法注冊(cè)組件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
   // 選項(xiàng)...后面再介紹
})

使用Vue.component(tagName, options)方法注冊(cè)組件:

Vue.component("my-component", {
  // 選項(xiàng)
})

組件在注冊(cè)之后，即可在HTML標(biāo)簽中使用這個(gè)組件名稱，像使用DOM元素一樣。

下面看一個(gè)例子:

// 定義
var MyComponent = Vue.extend({
    template: "
A custom component!
"
})

// 注冊(cè)
Vue.component("my-component", MyComponent)

// 創(chuàng)建根實(shí)例
new Vue({
    el: "#example"
})
局部注冊(cè)

你不必把每個(gè)組件都注冊(cè)到全局。你可以通過某個(gè) Vue 實(shí)例/組件的實(shí)例選項(xiàng) components 注冊(cè)僅在其作用域中可用的組件：

var Child = {
  template: "
A custom component!
"
}
new Vue({
  // ...
  components: {
    //  將只在父組件模板中可用
    "my-component": Child
  }
})
父組件和子組件

我們可以在組件中定義并使用其他組件，這就構(gòu)成了父子組件的關(guān)系.

我們分幾個(gè)步驟來理解這段代碼：

var Child = Vue.extend(...)定義一了個(gè)Child組件構(gòu)造器
var Parent = Vue.extend(...)定義一個(gè)Parent組件構(gòu)造器
components: { "child-component": Child }，將Child組件注冊(cè)到Parent組件，并將Child組件的標(biāo)簽設(shè)置為child-component。
template :"

This is a Parent component

"，在Parent組件內(nèi)以標(biāo)簽的形式使用Child組件。
Vue.component("parent-component", Parent) 全局注冊(cè)Parent組件
在頁面中使用標(biāo)簽渲染Parent組件的內(nèi)容，同時(shí)Child組件的內(nèi)容也被渲染出來
Child組件是在Parent組件中注冊(cè)的，它只能在Parent組件中使用，確切地說：子組件只能在父組件的template中使用。

組件注冊(cè)語法糖

以上組件注冊(cè)的方式有些繁瑣，Vue.js為了簡(jiǎn)化這個(gè)過程，提供了注冊(cè)語法糖
使用Vue.component()直接創(chuàng)建和注冊(cè)組件：

// 全局注冊(cè)，my-component1是標(biāo)簽名稱
Vue.component("my-component1",{
    template: "
This is the first component!
"
})

var vm1 = new Vue({
    el: "#app1"
})

Vue.component()的第1個(gè)參數(shù)是標(biāo)簽名稱，第2個(gè)參數(shù)是一個(gè)選項(xiàng)對(duì)象，使用選項(xiàng)對(duì)象的template屬性定義組件模板。
使用這種方式，Vue在背后會(huì)自動(dòng)地調(diào)用Vue.extend()。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89716.html

相關(guān)文章

  • Vue組件基礎(chǔ)與通信

    摘要：組件基礎(chǔ)與通信一腳手架簡(jiǎn)介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級(jí)組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實(shí)現(xiàn)祖先組件和后代組件之間通信。 Vue組件基礎(chǔ)與通信 一、vue cli腳手架 ① vue cli 簡(jiǎn)介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經(jīng)全局安裝了舊版本的...

    I_Am 評(píng)論0 收藏0

  • Vue-組件詳解

    摘要：除了監(jiān)聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個(gè)直接訪問子組件的應(yīng)急方案，應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用。將和合并成，會(huì)自動(dòng)去判斷是普通標(biāo)簽還是組件。子組件這里的狀態(tài)綁定的是父組件的數(shù)據(jù)。 查看原文站點(diǎn)，更多擴(kuò)展內(nèi)容及更佳閱讀體驗(yàn)！ 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-com...

    dadong 評(píng)論0 收藏0

  • Vue.js-組件詳解

    摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

    jeffrey_up 評(píng)論0 收藏0

  • vue中8種組件通信方式, 值得收藏!

    摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。 之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

    BicycleWarrior 評(píng)論0 收藏0

  • Vue官方推薦的風(fēng)格指南

    摘要：官方推薦的風(fēng)格指南個(gè)人筆記最近剛注意到官方多了一個(gè)風(fēng)格指南的推薦。中始終用組件命名因?yàn)楣俜酵扑]風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點(diǎn)。 Vue官方推薦的風(fēng)格指南-個(gè)人筆記 最近剛注意到vue官方多了一個(gè)vue風(fēng)格指南的推薦。 因?yàn)闃I(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來增加自己代碼的規(guī)范性，效果不錯(cuò)也可以安利到團(tuán)隊(duì)。 文檔沒有對(duì)JS...

    null1145 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<