简单说一下组件注册

最新推荐文章于 2022-11-19 01:38:28 发布

dreaming_drop

最新推荐文章于 2022-11-19 01:38:28 发布

阅读量1.7k

点赞数

原文链接：https://cn.vuejs.org/v2/guide/installation.html

版权

1.什么是组件？

组件其实就是页面组成的一部分，可以将它理解为模块，组件同模块一样，是自己独立的，有完整的功能，相互之间是剥离的、互不影响的，很大的一个作用是能够进行复用，组件化后，具有高内聚性和低耦合度

2.组件注册

使用组件需要先注册组件，组件的注册分为全局注册和局部注册。全局注册就是在Vue上注册，然后直接挂载就可以使用；局部注册则是挂载之后再进行注册。注册组件的数据选项为component(局部注册需要加s)

局部注册：如下所示，挂载在id为try的标签上后注册名字为one的组件，在组件内部，数据选项template是模板视图，表示组件的文档结构，除此之外，还可以使用vue实例化中的所有数据选项，如方法methods、计算属性computerd、八个生命周期钩子函数等都可以使用，值得注意的是，在组件内部，用data数据时，是用函数形式来返回一个对象

<body>
    <p>开始</p>
    <div id="try">
        <one></one>
    </div>
    <div id="test">
        <one></one>
    </div>
    <p>结束</p>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#try',
            components: {
                one: {  //one是组件名字，可以随意设置
                    template:'<p>试一下</p>',
                    methods: {
                        aaa(){
                            ...
                        }
                    },
                    mounted() {
                        ...
                    },
                    data() {
                        return {
                            ...
                        }
                    },
                    ...
                }
            }
        })
    </script>
</body>

由于是局部注册，所以只能在id为try的标签下使用，不能再其他标签上使用，文档结构如下：

效果如下：

全局注册：全局注册组件挂在Vue上之后再进行实例化，里面传两个参数，第一个参数是组件名字，可自定义；第二个参数是一个对象，里面的数据选项同局部注册时一样，template表示模板，使用data同样是使用函数形式，同样可以使用vue的方法methods、计算属性computerd等

示例：

<body>
    <p>开始</p>
    <div id="try">
        <one></one>
    </div>
    <div id="test">
        <one></one>
    </div>
    <p>结束</p>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('one', { template: '<p>试一试</p>' })
        new Vue({
            el: '#try'
        });
        new Vue({
            el: '#test'
        });
    </script>
</body>

效果如下：

比较：

局部注册只能在当前挂载组件下使用，全局注册可以在整个vue实例化进行使用。但是全局注册往往是不够理想的。比如，如果使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便已经不再使用一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

dreaming_drop

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单说一下组件注册

1.什么是组件？组件其实就是页面组成的一部分，可以将它理解为模块，组件同模块一样，是自己独立的，有完整的功能，相互之间是剥离的、互不影响的，很大的一个作用是能够进行复用，组件化后，具有高内聚性和低耦合度2.组件注册使用组件需要先注册组件，组件的注册分为全局注册和局部注册。全局注册就是在Vue上注册，然后直接挂载就可以使用；局部注册则是挂载之后再进行注册。注册组件的数据选项为component(局部注册需要加s) 局部注册：如下所示，挂载在id为try的标签上后注册名字为...
复制链接

扫一扫