组件使用的细节点

最新推荐文章于 2022-02-21 19:39:07 发布

学会改变Lxw

最新推荐文章于 2022-02-21 19:39:07 发布

阅读量167

点赞数

分类专栏： Vue学习笔记记录文章标签： vue

本文链接：https://blog.csdn.net/lxw88586390/article/details/107085599

版权

Vue学习笔记记录专栏收录该内容

14 篇文章 0 订阅

订阅专栏

使用is标签解决模板出现bug的问题

有时候一些特定标签的子标签，用自定义的组件无法识别，必须通过is标签来解决这样的问题
举例如tbody标签下面必须用tr标签，指定自定义的组件row为tr就可以解决这样的问题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue中的条件渲染</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table>
    </div>

    <script>
        Vue.component('row',{
            template:'<tr><td>this is a row </td></tr>'
        })
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>

</html>

vue中通过ref获取dom节点

当ref使用在div这样的标签上的时候，通过this.$refs.name获取到的内容实际上是标签对应的dom元素
当ref使用在组件上面的时候，获取到的是子组件的一个引用

学会改变Lxw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件使用的细节点

使用is标签解决模板出现bug的问题有时候一些特定标签的子标签，用自定义的组件无法识别，必须通过is标签来解决这样的问题举例如tbody标签下面必须用tr标签，指定自定义的组件row为tr就可以解决这样的问题：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue中的条件渲染</title> <script
复制链接

扫一扫

专栏目录