Vue入門和基礎（五）

前言：vue官網上關於vue元件的介紹，感覺內容很多很詳細，這裡介紹vue元件的一些基本使用方法。
1：註冊元件
首先vue的元件註冊就是使用Vue.component()方法，先定義元件的名字，然後傳入這個元件的配置項。詳細程式碼如下：

 <div id="app">
        <myself></myself>
        <my-self></my-self>
 </div>

<script>
  Vue.component('myself',{
    template: `<div>我自己是一個自定義元件</div>`,
    data () {
      return {
        message: 'hello world'
      }
    }
  })；
  var app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      'my-self': {
        template: `<div>我自己是一個區域性的自定義元件，只能在當前Vue例項中使用</div>`,
      }
    }
  })；
</script>
 

直接使用Vue.component()建立的元件，所有的Vue例項都可以使用。還可以在某個Vue例項中註冊只有自己能使用的元件。

注意的細節：

元件的模板只能有一個根元素
錯誤的寫法：

 template: `<div>我是一個元件</div>
                <button>你好</button>`,

正確寫法：

  template: `<div>我是一個元件</div>`,

元件中的data必須是函式：詳情請參考

https://blog.csdn.net/a250758092/article/details/78373905

關於DOM模板的解析

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

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

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

自定義元件 被認為是無效的內容，因此在渲染的時候會導致錯誤。這時應使用特殊的 is 屬性：

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

標準HTML中，一些元素中只能放置特定的子元素，另一些元素只能存在於特定的父元素中。這時可以用is屬性來解決這個問題