Vue组件的使用及个人理解与介绍

组件的基本使用

注册组件

注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

 Vue.component('mycomponent',{  template: `<div>这是一个自定义组件</div>`,  data () {   return {    message: 'hello world'   }  } })

如上方式，就已经创建了一个自定义组件，然后就可以在Vue实例挂在的DOM元素中使用它。

 <div id="app">  <mycomponent></mycomponent>  <my-component></my-component></div><script> var app = new Vue({  el: '#app',  data: {  },  components: {   'my-component': {    template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,   }  } })</script>

直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件。

var app = new Vue({  el: '#app',  data: {  },  components: {   'my-component': {    template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,   }  } })

模板的要求

注意：组件的模板只能有一个根元素。下面的情况是不允许的。

template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>      <button>hello</button>`,

组件中的data必须是函数

可以看出，注册组件时传入的配置和创建Vue实例差不多，但也有不同，其中一个就是data属性必须是一个函数。
这是因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。

而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了。

关于DOM模板的解析

当使用 DOM 作为模版时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。

在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table> <my-row>...</my-row></table>

自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。这时应使用特殊的 is 属性：

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