共计 840 个字符，预计需要花费 3 分钟才能阅读完成。
一. 使用 is 解决标签渲染中的小 bug
1. 如下代码，将表格中的 <tr><td></td></tr> 组件化
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<!– 开发环境版本，包含了有帮助的命令行警告 –>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
</head>
<body>
<div id=”app” >
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
// 定义全局组件
Vue.component(‘row’,{
template:`
<tr>
<td> 啦啦啦 </td>
</tr>
`
}),
new Vue({
el:’#app’
})
</script>
</body>
</html>
运行结果图示
乍一看是对的，但是细心的小伙伴会发现，组件 row 明明是引用在 tbody 中，但是在运行之后会发现: 组件解析到外面去了 这是一个 bug
2. 解决方法：
上出现的原因是因为在 html5 中，tbody 下必须为 tr, 如果是 row 就违背了 html5 的规范。那么我们就这样写：
<table>
<tbody>
<tr is=”row”></tr>
<tr is=”row”></tr>
<tr is=”row”></tr>
</tbody>
</table>
使用 is
运行结果图示：
这时候会发现 <tr><td></td></tr> 成功解析到 tbody 中了
3. 其他可能会产生此 bug 的标签
select
ul
ol
等等
