使用组件的细节点

关注

发布于: 2021 年 03 月 25 日

解析 DOM 模板时的注意事项

<div id="root">    <table>        <tbody>            <row></row>            <row></row>            <row></row>        </tbody>    </table></div><script type="text/javascript">    Vue.component('row', {        template: '<tr><td>this is a row</td></tr>'    })    var vm = new Vue({        el: '#root'    })</script>

复制代码

上面代码中，row 组件在渲染页面时，并不会把tr节点渲染到tbody里面，而是被提升到了和table同一个级别的地方。原因是在 html 编码规范中，tbody里面只能放tr，正确的做法是使用tr标签添加is属性等于组件名称row :

<tbody>    <tr is="row"></tr>    <tr is="row"></tr>    <tr is="row"></tr></tbody>

复制代码

同样，ul>li、ol>li、select > option 标签也要注意这样的问题。

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">

子组件内的 data 要使用函数返回

Vue.component('row', {    data() {        return {            content: 'this is content'        }    },    template: '<tr><td>{{content}}</td></tr>'})

复制代码

之所以这样设计是因为子组件有可能会被调用多次，而每次调用时的 data 数据都应该是独立的。因此需要通过一个函数来实现，每个实例可以维护一份被返回对象的独立的拷贝。

这样才不会出现每个子组件数据相互影响的情况。

通过 ref 引用操作 DOM

ref

虽然并不推荐我们在使用 vue 的时候操作 DOM，但是某些情况下我们必须要操作 DOM 来实现一些功能，因此可以通过 ref 引用的形式来获取到 DOM 节点。

<!-- `vm.$refs.p` 指向DOM元素节点 --><p ref="p">hello</p>
<!-- `vm.$refs.child` 指向组件实例 --><child-component ref="child"></child-component>

复制代码

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

组件实例对象 VueComponent

打开控制台，点击 demo 中的按钮可查看组件实例

See the Pen VwLeMoM by xugaoyi (@xugaoyi) on CodePen.

发布于: 2021 年 03 月 25 日阅读数: 7

原文链接:【http://xie.infoq.cn/article/ad18f67340ed9c1261903d2e5】。文章转载请联系作者。

小小

关注

还未添加个人签名 2019.08.05 加入

还未添加个人简介

发布

暂无评论

创作场景

使用组件的细节点

解析 DOM 模板时的注意事项

子组件内的 data 要使用函数返回

通过 ref 引用操作 DOM

小小

评论