组件
原因如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。
使用组件的步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<my-cnp></my-cnp>
</div>
</body>
<script src="js/vue.js">
</script>
<script>
//1.创建组件构造器
const myComponet = Vue.extend(
{
template:
`
<div>
<h1>我是组件</h1>
<p>我是组件的段落</p>
</div>`
}
);
//2.注册组件
Vue.component('my-cnp',myComponet);
let app=new Vue({
el:"#app",
data:{
},
})
</script>
</body>
</html>
组件的各个方法介绍
比如我们发现 第二个自定义组件是没有效果的
<div id="app">
<!-- 3.使用组件 -->
<my-cnp></my-cnp>
</div>
<my-cnp></my-cnp>
全局组件
我们通过调用Vue.component()注册组件时，组件的注册是全局的
这意味着该组件可以在任意Vue示例下使用。
上面的例子就是全局组件
局部组件
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件
只需要再实例中使用components即可，里面存的是键值对形式，key为组件的名称，value为组件构造器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<my-cnp></my-cnp>
</div>
<my-cnp></my-cnp>
</body>
<script src="js/vue.js">
</script>
<script>
//1.创建组件构造器
const myComponet = Vue.extend(
{
template:
`
<div>
<h1>我是组件</h1>
<p>我是组件的段落</p>
</div>`
}
);
/* //2.注册组件
Vue.component('my-cnp',myComponet); */
let app=new Vue({
el:"#app",
//局部注册
components:{
'my-cnp':myComponet
},
data:{
},
})
</script>
</body>
</html>
官方例子
是注册组件简化的版本，后面有简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<my-cnp></my-cnp>
</div>
<my-cnp></my-cnp>
</body>
<script src="js/vue.js">
</script>
<script>
//1.
Vue.component('my-cnp',{
data:function(){
return {
count:0
}
},
template:'<button v-on:click="count++">You clicked me {
{ count }} times.</button>'
})
let app=new Vue({
el:"#app",
data:{
},
})
</script>
</body>
</html>
这里注意data的定义，返回的对象，跟new Vue（）里面的data不同。
data:function(){
return {
count:0
}
},
父组件和子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<my_parent></my_parent>
</div>
</body>
<script src="js/vue.js">
</script>
<script>
//子组件容器
const childComponent= Vue.extend(
{
template:"<div>我是子组件</div>"
}
)
//父组件容器
const parentComponent= Vue.extend(
{
template:`
<div>
<div>我是父组件</div>
<my_child></my_child>
</div>
`
,
//需要再父容器中注册子组件，否则报错
components:{
"my_child":childComponent
}
}
)
let app=new Vue({
el:"#app",
components:{
'my_parent':parentComponent
}
})
</script>
</body>
</html>
注册组件简化版本
可与上述非简化版本的组件申请，进行对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<cmp></cmp>
<cmp2></cmp2>
</div>
</body>
<script src="js/vue.js">
</script>
<script>
//全局组件，简化版本
Vue.component('cmp',
{
template:"<div>我是全局组件的简化版本</div>"
})
let app=new Vue({
el:"#app",
//局部组件，简化版本
components:{
'cmp2':{
template:"<div>我是局部组件的简化版本</div>"
}
}
})
</script>
</body>
</html>
模板的分离写法
刚才，我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。
如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。
Vue提供了两种方案来定义HTML模块内容：
1.使用script标签
2.使用template标签
1.<script type="text/x-template" id="component">这里的id用来标注注册组件容器，type固定写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<cmp></cmp>
<cmp2></cmp2>
</div>
</body>
<script src="js/vue.js">
</script>
<script type="text/x-template" id="component">
<div>
<div>我是全局组件的简化版本</div>
</div>
</script>
<script type="text/x-template" id="my_component">
<div>
<div>我是局部组件的简化版本</div>
</div>
</script>
<script>
//全局组件，简化版本
Vue.component('cmp',
{
template:component
})
let app=new Vue({
el:"#app",
//局部组件，简化版本
components:{
'cmp2':{
template:my_component
}
}
})
</script>
</body>
</html>
2.同样<template id="component">，id用来指定组件容器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<cmp></cmp>
<cmp2></cmp2>
</div>
</body>
<template id="component">
<div>
<div>我是全局组件的简化版本</div>
</div>
</template>
<template id="my_component">
<div>
<div>我是局部组件的简化版本</div>
</div>
</template>
<script src="js/vue.js">
</script>
<script>
//全局组件，简化版本
Vue.component('cmp',
{
template:component
})
let app=new Vue({
el:"#app",
//局部组件，简化版本
components:{
'cmp2':{
template:my_component
}
}
})
</script>
</body>
</html>
组件能否访问实例中的数据？
我们通过下面代码，再全局组件中访问实例中的count，发现报错结论：组件是不能访问实例中的数据data的，应有自己的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{
{
count}}</div>
<!-- 3.使用组件 -->
<cmp></cmp>
</div>
</body>
<template id="component">
<div>
<div>我是全局组件的简化版本</div>
<div>{
{
count}}</div>
</div>
</template>
<script src="js/vue.js">
</script>
<script>
//全局组件，简化版本
Vue.component('cmp',
{
template:component
})
let app=new Vue({
el:"#app",
data:{
count:0
}
})
</script>
</body>
</html>
组件里面的数据，格式如下，需要使用return返回数据对象，使用函数的原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。
data:function(){
return{
msg:"我是组件里面的数据"
}
}
具体案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{
{
count}}</div>
<!-- 3.使用组件 -->
<cmp></cmp>
</div>
</body>
<template id="component">
<div>
<div>我是全局组件的简化版本</div>
<div style="color: red;">{
{
msg}}</div>
</div>
</template>
<script src="js/vue.js">
</script>
<script>
//全局组件，简化版本
Vue.component('cmp',
{
template:component,
//组件里面的数据，格式如下，需要使用return返回数据对象
data:function(){
return{
msg:"我是组件里面的数据"
}
}
})
let app=new Vue({
el:"#app",
data:{
count:0
}
})
</script>
</body>
</html>
使用return 最大好处上面也说了，数据直接不会不会影响，下面根据实例来验证一下把
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{
{
count}}</div>
<!-- 3.使用组件 -->
<cmp></cmp>
<cmp></cmp>
<cmp></cmp>
<cmp></cmp>
</div>
</body>
<template id="component">
<div>
<div>我是全局组件的简化版本</div>
<button v-on:click="addmsg">数据改变</button>
<div style="color: red;">{
{
msg}}</div>
</div>
</template>
<script src="js/vue.js">
</script>
<script>
//全局组件，简化版本
Vue.component('cmp',
{
template:component,
//组件里面的数据，格式如下，需要使用return返回数据对象
data:function(){
return{
msg:"我是组件里面的数据"
}
},
methods:{
addmsg:function(){
this.msg+='sad'
}
}
})
let app=new Vue({
el:"#app",
data:{
count:0
}
})
</script>
</body>
</html>
