Vue学习系列 -- 组件注册

最新推荐文章于 2023-11-13 09:30:00 发布

躬匠

最新推荐文章于 2023-11-13 09:30:00 发布

阅读量818

点赞数 1

分类专栏： Vue.js Vue学习系列

本文链接：https://blog.csdn.net/ydm19891101/article/details/90613978

版权

Vue.js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Vue学习系列

15 篇文章 1 订阅

订阅专栏

组件的使用就是为了提高代码的可复用。

组件与Vue实例类似，都要在注册之后才可以使用。注册又分为全局注册和局部注册两种方式，今天我们就先来简单学习一下。

全局注册

注册之后的组件全局任何地方都可以使用，具体使用如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Learning Vue.js</title>
</head>

<body>
<div id="app1">
<div>
    <component-demo>
    </component-demo>
</div>
</div>
</body>

<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
        Vue.component('component-demo',{
            props:["template"],
            template: "<div>This is component demo</div>",
            data: function () {
                return {
                   message : "component data function"
                }
            },
            computed :{},
            methods :{}
        }
    );
    var app = new Vue({
        el : "#app1",
        data : {
            message : "component demo"
        }
    })
</script>
</html>

有以下需要注意的点：

通过Vue.component()函数调用创建
全局组件的注册需要在vue实例创建之前进行
全局组件的template的DOM结构必须被一个元素包含，否则会造成无法渲染
除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data、computed、methods；但是在使用data的过程中，data必须是函数，然后将数据return出去；
引入的组件名称在使用标签时，标签名不能为驼峰命名的形式

局部注册

局部注册是指的注册之后的组件只在局部区域有效（当前父组件内），组件内也可以使用components选项来注册组件，使组件可以嵌套，具体用法如下：

<body>
<div id="app1">
<div>
    <component-demo message="this is parents component data">
    </component-demo>
</div>
</div>
</body>

<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var app = new Vue({
        el : "#app1",
        components : {
            "component-demo" : {
                template: "<div>{{message}}</div>",
                props : ["message"],
                data : function () {
                    return {
                        message : "this is children component data",
                        date : "201905271919"
                    }
                }
            }
        }
    })
</script>

注意：

局部组件需要在父组件实例化的时候创建
局部组件只在当前父组件范围内有效

另外，我们这里为了演示的方便，将两个组件放在了一个文件里，实际的项目中很少这样用。

实际中都是分别为一个组件，之后通过import / export来导出/引入，然后再进行全局/局部注册使用的。等后期我们逐渐深入之后会采用。

详细眼尖的同学应该看到了一个特殊的属性：props。而且，实际展示的效果与这个属性是强相关的。没错，这个就是我们下一个小节要说的父子组件之间的通信。

躬匠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习系列 -- 组件注册

组件的使用就是为了提高代码的可复用。组件与Vue实例类似，都要在注册之后才可以使用。注册又分为全局注册和局部注册两种方式，今天我们就先来简单学习一下。全局注册注册之后的组件全局任何地方都可以使用，具体使用如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <tit...
复制链接

扫一扫