本文探讨了Vue中组件的细节处理，包括如何使用is属性解决DOM组件错位问题，子组件data属性为何需定义为函数，以及ref属性的正确使用方法。
1.html标签中有一些固定层级，比如 tbody里面一层必须是 tr ,select 里面必须是option，那么我们使用组件模板时可能会产生问题，dom组件的错位
这个时候我们可以使用 is属性
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中组件的细节</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<table>
<tbody>
<tr is='row'></tr>
<tr is='row'><tr>
<tr is='row'></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>111</td></tr>'
});
var app = new Vue({
el:'#app2'
});
</script>
</body>
</html>
2.子组件里的data必须定义成一个函数，因为子组件可能被多个地方共用，为了避免数据变更的冲突，设计成只能定义成方法
3. ref属性的使用 app对象名.$refs.ref值 即可获取此组件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
