基本示例

下面是一個Vue組件的例子：

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

組件是具有名稱的可重用Vue實例：在本例中，<button-counter>. 我們可以將此組件用作使用以下方法創建的根Vue實例中的自定義元素new Vue：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

由于組件是可重復使用Vue的情況下，他們接受相同的選項new Vue，如data，computed，watch，methods，和生命周期掛鉤。唯一的例外是一些特定于 root 的選項，例如el.

重用組件

組件可以根據需要多次重復使用：

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

請注意，當單擊按鈕時，每個按鈕都維護著自己的、單獨的count. 這是因為每次使用組件時，都會創建它的一個新實例。

組織組件

應用程序被組織成嵌套組件樹是很常見的。

例如，您可能有用于標題、側邊欄和內容區域的組件。

要在模板中使用這些組件，必須注冊它們，以便 Vue 知道它們。有兩種類型的組件注冊：global和local。到目前為止，我們只在全局注冊了組件，使用Vue.component：

Vue.component('my-component-name', {
  // ... options ...
})

全局注冊的組件可以new Vue在之后創建的任何根 Vue 實例 ( )的模板中使用——甚至可以在該 Vue 實例的組件樹的所有子組件中使用。

使用 props 將數據傳遞給子組件

道具是您可以在組件上注冊的自定義屬性。當一個值被傳遞給一個 prop 屬性時，它成為該組件實例上的一個屬性。要將標題傳遞給我們的博客文章組件，我們可以使用props選項將其包含在此組件接受的 props 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一個組件可以有任意多的 props，默認情況下，任何值都可以傳遞給任何 props。在上面的模板中，您將看到我們可以在組件實例上訪問此值，就像使用data.

注冊道具后，您可以將數據作為自定義屬性傳遞給它，如下所示：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

單個根元素

在構建<blog-post>組件時，您的模板最終將不僅僅包含標題：

<h3>{{ title }}</h3>

至少，您需要包含帖子的內容：

<h3>{{ title }}</h3>
<div v-html="content"></div>

但是，如果您在模板中嘗試此操作，Vue 將顯示錯誤，說明每個組件都必須有一個根元素。您可以通過將模板包裝在父元素中來修復此錯誤，例如：

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

監聽子組件事件

在我們開發<blog-post>組件時，某些功能可能需要與父組件進行通信。例如，我們可能決定包含一個輔助功能來放大博客文章的文本，同時將頁面的其余部分保留為默認大?。?/p>

在父級中，我們可以通過添加postFontSize數據屬性來支持此功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

帶插槽的內容分發

就像 HTML 元素一樣，能夠將內容傳遞給組件通常很有用，如下所示：

<alert-box>
  Something bad happened.
</alert-box>

這可能會呈現如下內容：

幸運的是，這個任務通過 Vue 的自定義<slot>元素變得非常簡單：

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

正如您將在上面看到的，我們只是將插槽添加到我們想要它去的地方——就是這樣。我們完成了!

以上就是動力節點小編介紹的"Vue組件基本示例"，希望對大家有幫助，想了解更多可查看編程入門教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。