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>
自定义组件
<table>
<tr is="my-tr"></tr>
</table>
也就是说，标准HTML中，一些元素中只能放置特定的子元素，另一些元素只能存在于特定的父元素中。比如table中不能放置div，tr的父元素不能div等。所以，当使用自定义标签时，标签名还是那些标签的名字，但是可以在标签的is属性中填写自定义组件的名字。
应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：
- <script type="text/x-template">
- JavaScript 内联模版字符串
- vue 组件
