注册组件
组件的使用分成三个步骤：
创建组件构造器
注册组件
使用组件。
我们来看看通过代码如何注册组件
查看运行结果：
和直接使用一个div看起来并没有什么区别。
但是我们可以设想，如果很多地方都要显示这样的信息，我们是不是就可以直接使用来完成呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<!-- 3. 使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script>
// 1. 创建组件构造器
const constr = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<h2>我是内容, 哈哈哈</h2>
</div>
`
});
// 2. 注册组件, 并且给组件命名
Vue.component('my-cpn', constr);
const vm = new Vue({
el: '#app',
data: {
msg: '你好'
},
methods: {}
});
</script>
</body>
</html>
这里的步骤都代表什么含义呢？
1.Vue.extend()：
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。
2.Vue.component()：
调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
3.组件必须挂载在某个Vue实例下，否则它不会生效。
我们来看下面我使用了三次<my-cpn></my-cpn>
而第三次其实并没有生效：
组件其他补充
全局组件和局部组件
当我们通过调用Vue.component()注册组件时，组件的注册是全局的
这意味着该组件可以在任意Vue示例下使用。
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件:
踩坑:
- 组件里只能有一个根标签(先写一个div然后把所有内容包起来)
- 给组件命名的时候一定要用xx-xx的方式, 用驼峰会使Vue无法识别. 上图里的2个组件在代码中的名字是: 'my-cpn'和'my-poem'
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="vm">
{{msg}}
<!-- 3. 使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<div id="app">
{{msg}}
<div>
<my-poem></my-poem>
</div>
</div>
<script>
// 1. 创建组件构造器
const constr = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<h2>我是内容, 哈哈哈</h2>
</div>
`
});
const poem = Vue.extend({
template: `
<div>
<h2>肛好遇见你</h2>
<h2>作者: 我是你爹</h2>
</div>
`
});
// 2. 注册全局组件(Vue实例可以不止一个, 全局组件可以给多个使用), 并且给组件命名: 名字要用''引号括起来, 并且坚决不能使用驼峰, 单词之间用-相连
Vue.component('my-cpn', constr);
const vm = new Vue({
el: '#vm',
data: {
msg: '你好'
},
methods: {}
});
const app = new Vue({
el: '#app',
data: {
msg: '你谁啊?'
},
methods: {},
// 局部组件, 只能在id="app"的div里使用.
components: {
'my-poem': poem
}
});
</script>
</body>
</html>