Vue组件的data必须是一个函数、单个根元素、局部组件

1.Vue组件的data必须是一个函数

---

参考官网文档

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

<div id="app">
	<my-button></my-button>
</div>
<script>
	Vue.component('my-button', {
		template: '<button @click="count++">{{ msg }} {{ count }}</button>'
		,data: function () {
			return {
				count: 0,
				msg: '点我啊'
			}
		}
	})
	
	let vm = new Vue({
		el: '#app'
		,data: {
			msg: 'liang'
		}
	})
</script>

2. 每个组件必须只有一个根元素

---

参考官方文档

错误示例

正确示例

<div id="app">
	<my-button></my-button>
</div>
<script>
	Vue.component('my-button', {
		template: `
		<ul>
			<li>1</li>
			<li>2</li>
		</ul>
		`
	})
	
	let vm = new Vue({
		el: '#app'
		,data: {
			msg: 'liang'
		}
	})
</script>

3. 注册局部组件

---

components 属性

• my-span 组件名
• mySpan 组件模板存放变量

<div id="app">
	<my-span></my-span>
</div>
<script>
	var mySpan = {
		template: '<p>12345</p>'
		,data: function(){
			return {
				
			}
		}
	}
	
	let vm = new Vue({
		el: '#app'
		,data: {
			msg: 'liang'
		}
		,components: {
			'my-span': mySpan
		}
	})
</script>