Vue学习系列 -- 组件注册
Posted 躬匠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- 组件注册相关的知识，希望对你有一定的参考价值。
组件的使用就是为了提高代码的可复用。
组件与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。而且，实际展示的效果与这个属性是强相关的。没错，这个就是我们下一个小节要说的父子组件之间的通信。
以上是关于Vue学习系列 -- 组件注册的主要内容，如果未能解决你的问题，请参考以下文章