<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<th>id</th>
</thead>
<tbody>
<tr is="tr-demo"></tr>
<tr is="demo-key"></tr>
</tbody>
</table>
<!-- 如果标签的内部标签用组件完成，需要is标签 -->
<!--组件化时，如果一个元素是由多个标签组成的，比如select,table,内部
标签想组件化，不可以直接使用组件，需要用is属性，指定组件-->
<!-- <tr-demo></tr-demo>-->
</div>
<script src="js/vue.js"></script>
<script>
Vue.component(‘tr-demo‘,{
template:‘<tr><td>1</td></tr>‘
})
new Vue({
el:‘#app‘,
data:{},
methods:{},
// 局部组件
components:{
‘demo-key‘:{
template: "<h1 @click=‘change‘>{{msg}}</h1>",
data:function () {
return{
msg:0
}
},
methods:{
change:function () {
this.msg++
}
}
}
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/liulilitoday/p/13369886.html