女人书籍排行榜,盗墓笔记小说下载,小说阅读网站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)VUE3教程：Vue3.0組件基礎(chǔ)

基本實(shí)例

這里有一個(gè) Vue 組件的示例：

// 創(chuàng)建一個(gè)Vue 應(yīng)用
const app = Vue.createApp({})


// 定義一個(gè)名為 button-counter 的新全局組件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    `
})

INFO

在這里演示的是一個(gè)簡單的示例，但是在典型的 Vue 應(yīng)用程序中，我們使用單個(gè)文件組件而不是字符串模板。你可以在本節(jié)找到有關(guān)它們的更多信息。

組件是可復(fù)用的組件實(shí)例，且?guī)в幸粋€(gè)名字：在這個(gè)例子中是。我們可以在一個(gè)通過 new Vue 創(chuàng)建的 Vue 根實(shí)例中，把這個(gè)組件作為自定義元素來使用：

app.mount('#components-demo')

點(diǎn)擊此處實(shí)現(xiàn)

因?yàn)榻M件是可復(fù)用的組件實(shí)例，所以它們與 new Vue 接收相同的選項(xiàng)，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。

#組件的復(fù)用

你可以將組件進(jìn)行任意次數(shù)的復(fù)用：

點(diǎn)擊此處實(shí)現(xiàn)

注意當(dāng)點(diǎn)擊按鈕時(shí)，每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的 count。因?yàn)槟忝坑靡淮谓M件，就會(huì)有一個(gè)它的新實(shí)例被創(chuàng)建。

#組件的組織

通常一個(gè)應(yīng)用會(huì)以一棵嵌套的組件樹的形式來組織

例如，你可能會(huì)有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個(gè)組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。

為了能在模板中使用，這些組件必須先注冊(cè)以便 Vue 能夠識(shí)別。這里有兩種組件的注冊(cè)類型：全局注冊(cè)和局部注冊(cè)。至此，我們的組件都只是通過 component 全局注冊(cè)的：

const app = Vue.createApp({})


app.component('my-component-name', {
  // ... 選項(xiàng) ...
})

全局注冊(cè)的組件可以在隨后創(chuàng)建的 app 實(shí)例模板中使用，也包括根實(shí)例組件樹中的所有子組件的模板中。

到目前為止，關(guān)于組件注冊(cè)你需要了解的就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會(huì)推薦你再回來把組件注冊(cè)讀完。

#通過 Prop 向子組件傳遞數(shù)據(jù)

早些時(shí)候，我們提到了創(chuàng)建一個(gè)博文組件的事情。問題是如果你不能向這個(gè)組件傳遞某一篇博文的標(biāo)題或內(nèi)容之類的我們想展示的數(shù)據(jù)的話，它是沒有辦法使用的。這也正是 prop 的由來。

Prop 是你可以在組件上注冊(cè)的一些自定義 attribute。當(dāng)一個(gè)值傳遞給一個(gè) prop attribute 的時(shí)候，它就變成了那個(gè)組件實(shí)例的一個(gè) property。為了給博文組件傳遞一個(gè)標(biāo)題，我們可以用一個(gè) props 選項(xiàng)將其包含在該組件可接受的 prop 列表中：

const app = Vue.createApp({})


app.component('blog-post', {
  props: ['title'],
  template: `{{ title }}`
})


app.mount('#blog-post-demo')

一個(gè)組件默認(rèn)可以擁有任意數(shù)量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會(huì)發(fā)現(xiàn)我們能夠在組件實(shí)例中訪問這個(gè)值，就像訪問 data 中的值一樣。

一個(gè) prop 被注冊(cè)之后，你就可以像這樣把數(shù)據(jù)作為一個(gè)自定義 attribute 傳遞進(jìn)來：

點(diǎn)擊此處實(shí)現(xiàn)

然而在一個(gè)典型的應(yīng)用中，你可能在 data 里有一個(gè)博文的數(shù)組：

const App = {
  data() {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}


const app = Vue.createApp({})


app.component('blog-post', {
  props: ['title'],
  template: `{{ title }}`
})


app.mount('#blog-posts-demo')

并想要為每篇博文渲染一個(gè)組件：

如上所示，你會(huì)發(fā)現(xiàn)我們可以使用 v-bind 來動(dòng)態(tài)傳遞 prop。這在你一開始不清楚要渲染的具體內(nèi)容，是非常有用的。

到目前為止，關(guān)于 prop 你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會(huì)推薦你再回來把 prop 讀完。

#監(jiān)聽子組件事件

在我們開發(fā) 組件時(shí)，它的一些功能可能要求我們和父級(jí)組件進(jìn)行溝通。例如我們可能會(huì)引入一個(gè)輔助功能來放大博文的字號(hào)，同時(shí)讓頁面的其它部分保持默認(rèn)的字號(hào)。

在其父組件中，我們可以通過添加一個(gè) postFontSize 數(shù)據(jù) property 來支持這個(gè)功能：

const App = {
  data() {
    return {
      posts: [
        /* ... */
      ],
      postFontSize: 1
    }
  }
}

它可以在模板中用來控制所有博文的字號(hào)：

現(xiàn)在我們?cè)诿科┪恼闹疤砑右粋€(gè)按鈕來放大字號(hào)：

app.component('blog-post', {
  props: ['title'],
  template: `
    
      {{ title }}
      
    
  `
})

問題是這個(gè)按鈕不會(huì)做任何事：

當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，我們需要告訴父級(jí)組件放大所有博文的文本。幸好組件實(shí)例提供了一個(gè)自定義事件的系統(tǒng)來解決這個(gè)問題。父級(jí)組件可以像處理 native DOM 事件一樣通過 v-on 或 @ 監(jiān)聽子組件實(shí)例的任意事件：

同時(shí)子組件可以通過調(diào)用內(nèi)建的$emit方法并傳入事件名稱來觸發(fā)一個(gè)事件：

多虧了 @enlarge-text="postFontSize += 0.1" 監(jiān)聽器，父級(jí)將接收事件并更新 postFontSize 值。點(diǎn)擊此處實(shí)現(xiàn)

我們可以在組件的 emits 選項(xiàng)中列出已拋出的事件。

app.component('blog-post', {
  props: ['title'],
  emits: ['enlarge-text']
})

這將允許你檢查組件拋出的所有事件，還可以選擇 validate them

#使用事件拋出一個(gè)值

有的時(shí)候用一個(gè)事件來拋出一個(gè)特定的值是非常有用的。例如我們可能想讓組件決定它的文本要放大多少。這時(shí)可以使用 $emit 的第二個(gè)參數(shù)來提供這個(gè)值：

然后當(dāng)在父級(jí)組件監(jiān)聽這個(gè)事件的時(shí)候，我們可以通過 $event 訪問到被拋出的這個(gè)值：

或者，如果這個(gè)事件處理函數(shù)是一個(gè)方法：

那么這個(gè)值將會(huì)作為第一個(gè)參數(shù)傳入這個(gè)方法：

methods: {
  onEnlargeText(enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

#在組件上使用 v-model

自定義事件也可以用于創(chuàng)建支持 v-model 的自定義輸入組件。記?。?/p>

等價(jià)于：

當(dāng)用在組件上時(shí)，v-model 則會(huì)這樣：

WARNING

請(qǐng)注意，我們?cè)谶@里使用的是 model value，因?yàn)槲覀兪褂玫氖?DOM 模板中的 kebab-case。你可以在 DOM Template Parsing Caveats 部分找到關(guān)于 kebab cased 和 camelCased 屬性的詳細(xì)說明

為了讓它正常工作，這個(gè)組件內(nèi)的必須：

將其 value attribute 綁定到一個(gè)名叫 modelValue 的 prop 上
在其 input 事件被觸發(fā)時(shí)，將新的值通過自定義的 update:modelValue 事件拋出

寫成代碼之后是這樣的：

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    
  `
})

現(xiàn)在 v-model 就應(yīng)該可以在這個(gè)組件上完美地工作起來了：

在自定義組件中創(chuàng)建 v-model 功能的另一種方法是使用 computed property 的功能來定義 getter 和 setter。

在下面的示例中，我們使用計(jì)算屬性重構(gòu) 組件。

請(qǐng)記住，get 方法應(yīng)返回 modelValue property，或用于綁定的任何 property，set 方法應(yīng)為該 property 觸發(fā)相應(yīng)的 $emit。

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { this.$emit('update:modelValue', value)
      }
    }
  }
})

現(xiàn)在你只需要了解自定義組件事件，但一旦你讀完本頁并對(duì)其內(nèi)容還覺得不錯(cuò)，我們建議你稍后再閱讀有關(guān)自定義事件

#通過插槽分發(fā)內(nèi)容

和 HTML 元素一樣，我們經(jīng)常需要向一個(gè)組件傳遞內(nèi)容，像這樣：


  Something bad happened.

可能會(huì)渲染出這樣的東西：點(diǎn)擊此處實(shí)現(xiàn)

幸好，Vue 自定義的元素讓這變得非常簡單：

app.component('alert-box', {
  template: `
    
      Error!
      
    
  `
})

如你所見，我們只要在需要的地方加入插槽就行了——就這么簡單！

到目前為止，關(guān)于插槽你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會(huì)推薦你再回來把插槽讀完。

#動(dòng)態(tài)組件

有的時(shí)候，在不同組件之間進(jìn)行動(dòng)態(tài)切換是非常有用的，比如在一個(gè)多標(biāo)簽的界面里：點(diǎn)擊此處實(shí)現(xiàn)

上述內(nèi)容可以通過 Vue 的元素加一個(gè)特殊的 is attribute 來實(shí)現(xiàn)：

在上述示例中，currentTabComponent 可以包括

已注冊(cè)組件的名字，或
一個(gè)組件的選項(xiàng)對(duì)象

你可以在這里查閱并體驗(yàn)完整的代碼，或在這個(gè)版本了解綁定組件選項(xiàng)對(duì)象，而不是已注冊(cè)組件名的示例。

請(qǐng)留意，這個(gè) attribute 可以用于常規(guī) HTML 元素，但這些元素將被視為組件，這意味著所有的 attribute都會(huì)作為 DOM attribute 被綁定。對(duì)于像 value 這樣的 property，若想讓其如預(yù)期般工作，你需要使用 .prop 修飾器。

到目前為止，關(guān)于動(dòng)態(tài)組件你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會(huì)推薦你再回來把動(dòng)態(tài) & 異步組件讀完。

#解析 DOM 模板時(shí)的注意事項(xiàng)

有些 HTML 元素，諸如

 和  和 ，只能出現(xiàn)在其它某些特定的元素內(nèi)部。
 這會(huì)導(dǎo)致我們使用這些有約束條件的元素時(shí)遇到一些問題。例如：


  
 這個(gè)自定義組件  會(huì)被作為無效的內(nèi)容提升到外部，并導(dǎo)致最終渲染結(jié)果出錯(cuò)。幸好這個(gè)特殊的 v-is attribute 給了我們一個(gè)變通的辦法：

  
 WARNING
 v-is 值應(yīng)為 JavaScript 字符串文本：





 另外，HTML 屬性名不區(qū)分大小寫，因此瀏覽器將把所有大寫字符解釋為小寫。這意味著當(dāng)你在 DOM 模板中使用時(shí)，駝峰 prop 名稱和 event 處理器參數(shù)需要使用它們的 kebab-cased (橫線字符分隔) 等效值：
//  在JavaScript中的駝峰


app.component('blog-post', {
  props: ['postTitle'],
  template: `
    {{ postTitle }}
  `
})



 需要注意的是如果我們從以下來源使用模板的話，這條限制是*不存在*的：


字符串模板 (例如：template: '...')
單文件組件