欢迎光临
我们一直在努力

Vue中的组件使用注意事项

HTML 规范

根据HTML5规范,tr外边必须包裹tbody,否则不能正常解析。因此当我们在一个组件中只写tr/td,他会自动包裹一个tbody,为了防止这种事情发生,我们可以通过is解决:

<tbody>
    <tr is="row"></tr> //这里的row为子组件
    <tr is="组件名"></tr>
    <tr is="row"></tr>
</tbody>

同样的,列表ul/ol/li,select等也存在相似问题,也同样可以通过该方法解决:

<ul>
	<li is='组件名'></li>
	<li is='组件名'></li>
</ul>
<select>
	<option is='组件名'></option>
	<option is='组件名'></option>
</select>

Data 定义

在子组件定义data的时候,data必须是一个函数,通过函数返回一个对象,而不能直接是一个对象。原因是组件可能会被多次引用,只有通过函数返回对象,才能保证该组件里返回对象的独立性。

Dom 操作

Vue不建议我们在代码中操作dom,但是在处理一些极其复杂的动画效果时,可以通过ref这个引用来操作节点。

// 定义
<div ref='div'></div>
// 使用
this.$refs.div //这就代表着上面的div节点

赞(0) 打赏
未经允许不得转载:散人研 » Vue中的组件使用注意事项
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

6 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏