Vue学习：使用组件的细节点_vue handlegetdictionarylist-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43912883/article/details/102857097

本文深入探讨Vue.js中组件使用的三个关键技巧：使用is属性解决HTML5解析问题，确保组件结构符合HTML规范；通过data选项的函数形式正确绑定组件状态，避免实例化时的数据冲突；运用ref属性操作DOM元素，实现组件内部的DOM交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue学习：使用组件的细节点

一、is解决html5解析错误问题

1.1 在HTML创建table

            <table>
                <tbody>
                    <tr><td>this is derrick</td></tr>
                    <tr><td>this is derrick</td></tr>
                    <tr><td>this is derrick</td></tr>
                </tbody>
            </table>

1.2 使用子组件代替tr

出错，tr没有包裹在tbody里面，html5中规定我们table里面放tbody，tbody里面放tr，但是我们将tr改成了row，所以解析会出现问题

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

在这里插入图片描述

1.3 利用is属性解决问题

tbody里面只能写tr，我们就写tr，但实际上我们是要用row代替，利用is属性即可

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

二、data使用函数

2.1 将显示的内容放入data

报错，The “data” option should be a function that returns a per-instance value in component definitions，说明组件里面的data不能像vue实例一样直接写，要使用方法function的形式返回

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

2.2 修改data

    <script>
        Vue.component('row',{
            data:function(){
                return {
                    content:'this is Derrick'
                }
            },
            template:'<tr><td>{{content}}</td></tr>'
        })
        var vm = new Vue({
            el:"#app",
        })
    </script>

三、ref操作DOM

ref为DOM起一个引用的名字，$ refs代表整个vue中所有的引用，$refs.后面跟的就是你需要操作的引用，这样便可以操作DOM

    <body>
        <div id="app">
            <div ref='hello' @click="handleClick">hello derrick</div>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:"#app",
            methods:{
                handleClick:function(){
                    //指向div
                    alert(this.$refs.hello.innerText)
                }
            }
        })
    </script>