Vue入门和基础——Vue自定义组件基础

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属性来解决这个问题