开发Vue组件细节点

最新推荐文章于 2025-02-06 18:13:43 发布

原创最新推荐文章于 2025-02-06 18:13:43 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了Vue组件的data属性为何必须为函数而非对象，解析了Vue组件is特性的使用场景和作用，以及如何利用ref获取组件实例或DOM元素，帮助开发者更深入地理解和运用Vue组件。

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

1.在组件定义data只能是函数，不能是对象

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

2.Vue组件is特性

因为vue模板就是dom模板，使用的是浏览器原生的解析器进行解析，所以dom模板的限制也就成为vue模板的限制了，要求vue模板是有效的HTML代码片段。但是由于dom的一些html元素对放入它里面的元素有限制，所以导致有些组件没办法放在一些标签中，比如<ul></ul> <select></select><a></a> <table></table>等等这些标签中，所以需要增加is特性来扩展，从而达到可以在这些受限制的html元素中使用。例如：

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


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

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

 <counter ref="one" @change="handleChange"></counter>

 <script>
    ue.component('counter',{
            template: '<div @click="handleClick">{{number}}</div>',
            data:function () {
                return{
                    number:0
                }
            },
            methods:{
                handleClick:function () {
                    this.number++;
                }
            }
        })
 </script>