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 属性

<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>