全局注册组件
<div id="app"> <my-component></my-component> </div> <script> Vue.component(‘my-component‘,{ template:‘<div>content</div>‘ }); var app=new Vue({ el:‘#app‘ }) </script>
注意：template的DOM结构必须被一个元素包含。
局部注册
<script> var Child={ template:‘<div>content</div>‘ } var app=new Vue({ el:‘#app‘, component:{ ‘my-component‘:Child } } })
组件受到HTML标签的限制，如table,ul,ol,select等，处理办法使用特殊的is属性来挂载组件：
<div id="app"> <table> <tbody is="my-component"></tbody> </table> </div>
注意：字符串模板不受限制。
组件像vue实例那样，也可使用其他的选项，如data，computed，methods等，data稍有区别，data必须是函数，return出去。
<script> Vue.component(‘my-component‘,{ template:‘<div>{{message}}</div>‘, data:function(){ return{ message:‘组件内容‘ } } }); var app=new Vue({ el:‘#app‘ }) </script>
注意：js的对象是引用关系，如果return出的对象引用了外部的一个对象，那这个对象是共享的，会同步改变。
原文：https://www.cnblogs.com/fishope/p/10905245.html