vue 組件基本使用

組件的基本使用

註冊組件

註冊組件就是利用Vue.component()方法，先傳入一個自定義組件的名字，而後傳入這個組件的配置。vue.component()註冊的全局組件

Vue.component('hello-world',{
    template: `<div>這是一個自定義組件</div>`,
    data () {
      return {
        message: 'hello world'
      }
    }
  })

組件使用

以在一個經過 new Vue 建立的 Vue 根實例中，把這個組件做爲自定義元素來使用

html

<div id="app">
  <hello-world></hello-world>
</div>

var app = new Vue({ el: '#app'})

定義局部組件(局部組件只能在當前vue實例中使用)

var app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      'my-component': {
        template: `<div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div>`,
      }
    }
  })

模板的要求

注意：組件的模板只能有一個根元素。下面的狀況是不容許的。

template: `<div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div>
            <button>hello</button>`,
  //改成   
  template: `<div>
                <div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div>
                <button>hello</button>
            </div>`,

模板能夠在外面定義

<div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mycomponent">
        <h1>mycomponent</h1>
    </template>
    
    <script>
        Vue.component('mycomponent', {
            template: '#mycomponent'
           
        })
        var app = new Vue({ el: '#app'})
    
    </script>

組件中的data必須是函數

能夠看出，註冊組件時傳入的配置和建立Vue實例差很少，但也有不一樣，其中一個就是data屬性必須是一個函數。
這是由於若是像Vue實例那樣，傳入一個對象，因爲JS中對象類型的變量實際上保存的是對象的引用，因此當存在多個這樣的組件時，會共享數據，致使一個組件中數據的改變會引發其餘組件數據的改變。
而使用一個返回對象的函數，每次使用組件都會建立一個新的對象，這樣就不會出現共享數據的問題來了。

DOM模板的解析問題

當使用 DOM 做爲模版時 (例如，將 el 選項掛載到一個已存在的元素上), 你會受到 HTML 的一些限制，由於 Vue只有在瀏覽器解析和標準化HTML後才能獲取模板內容。尤爲像這些元素 ul，ol，table，select 限制了能被它包裹的元素，而一些像 這樣的元素只能出如今某些其它元素內部

在自定義組件中使用這些受限制的元素時會致使一些問題，例如：

<table>
  <my-tr>...</my-tr>
</table>

自定義組件 被認爲是無效的內容，所以在渲染的時候會致使錯誤。這時應使用特殊的 is 屬性：

<table>
  <tr is="my-tr"></tr>
</table>

也就是說，標準HTML中，一些元素中只能放置特定的子元素，另外一些元素只能存在於特定的父元素中。好比table中不能放置div，tr的父元素不能div等。因此，當使用自定義標籤時，標籤名仍是那些標籤的名字，可是能夠在標籤的is屬性中填寫自定義組件的名字。

應當注意，若是您使用來自如下來源之一的字符串模板，這些限制將不適用：

• <script type="text/x-template">
• JavaScript 內聯模版字符串
• vue 組件