刚学习到组件,感觉这是一个很神奇的东西,但是官方文档上的介绍却又让人难以理解,只是草草记下了大致的步骤,接下来我们深入探究一下组件
基础的组件介绍
其实组件就是一个独立的Vue实例,它同样也有着Vue实例所拥有的各种属性,例如data,methods,computed等
组件的创建分为三部
- 创建组件构造器对象
- 注册组件
- 使用组件
传统的构造组件方法
//创建组件构造器对象
const mycomponent=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容21!</p>
<p>我是内容12!</p>
</div>`
});
那就是通过这个extend方法来看,那么我们很明显的能看出,这template中的代码看的有点让人恶心,尤其是放到编译器中后,没有自动补全不说,还没有对齐。
传统的注册组件方法
Vue.component('cpntest',mycomponent);
component方法的第一个参数是你要创建的组件名,第二个就是你所存放组件的变量名了
使用组件方法
<cpntest></cpntest>
总代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<cpntest></cpntest>
</div>
</body>
<script type="text/javascript">
//创建组件构造器对象
const mycomponent=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容21!</p>
<p>我是内容12!</p>
</div>`
});
//注册组件
Vue.component('cpntest',mycomponent);
var vm=new Vue({
el:'#app'
});
</script>
</html>
而实际上,Vue.component('cpntest',mycomponent);
由这种注册组件的注册的组件被称为全局组件,它是在整个文件中都有效的。
局部组件创建
var vm=new Vue({
el:'#app',
components:{
cpntest:mycomponent
}
});
这一种创建出来的组件被称为局部组件,它只在所创建的Vue实例中能够使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpntest></cpntest>
</div>
<div id="">
<cpntest></cpntest>
</div>
</body>
<script type="text/javascript">
//创建组件构造器对象
const mycomponent=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容21!</p>
<p>我是内容12!</p>
</div>`
});
//注册组件
//Vue.component('cpntest',mycomponent);
var vm=new Vue({
el:'#app',
components:{
cpntest:mycomponent
}
});
</script>
</html>
此时如果你把该组件放在Vue实例外,那么就找不到了
父组件和子组件和根组件
在extend方法中,也有着一个components属性,同样可以在里面注册主键,那么如果把A组件放在B组件中注册,然后B组件在一个Vue实例中注册,B组件就为父组件,A组件就为子组件,而该Vue实例也可以被称为根组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<test2></test2>
</div>
</body>
<script type="text/javascript">
const cpn1=Vue.extend({
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容21!</p>
<p>我是内容12!</p>
</div>`
});
const cpn2=Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容21!</p>
<p>我是内容12!</p>
<test1></test1>
</div>`,
components:{
test1:cpn1
}
});
var vm=new Vue({
el:'#app',
data:{
},
components:{
test2:cpn2
}
});
</script>
</html>
如果再想使用子组件,就不可以了,因为你在父组件调用时会直接将子组件中的html渲染好,而如果这时你还想在Vue实例中调用,就找不到了,真是无情啊:)
组件的语法糖形式
前面也能够发现,那用``这种形式,还要将html包括在里面实在是太过反人类,因此也就有了语法糖格式template:'#testctn2'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="testctn2">
<div>
<h2 @click="fun()">{{title}}</h2>
<p>我是内容21!</p>
<p>我是内容12!</p>
</div>
</template>
</body>
<script type="text/javascript">
Vue.component('cpn',{
template:'#testctn2',
data(){
return {
title:'abc',
}
}
});
var vm=new Vue({
el:'#app',
});
</script>
</html>
组件中的data为什么是一个方法的形式,而不是像Vue实例一样为一个属性
<body>
<div id="app">
<calculator></calculator>
<calculator></calculator>
<calculator></calculator>
</div>
<template id="calc">
<div>
<h2>计数器</h2>
<h3>{{count}}</h3>
<button type="button" @click="increasment()">+</button>
<button type="button" @click="decreasment()">-</button>
</div>
</template>
</body>
Vue.component('calculator',{
template:'#calc',
data(){
return {count:0}
},
methods:{
increasment(){
this.count++;
},
decreasment(){
this.count--;
}
}
})
如果同时用三次一个组件,那么就会每次返回三个值,这三个值互不影响。
<body>
<div id="app">
<calculator></calculator>
<calculator></calculator>
<calculator></calculator>
</div>
<template id="calc">
<div>
<h2>计数器</h2>
<h3>{{obj}}</h3>
<button type="button" @click="increasment()">+</button>
<button type="button" @click="decreasment()">-</button>
</div>
</template>
</body>
const obj=0;
Vue.component('calculator',{
template:'#calc',
data(){
return obj
},
methods:{
increasment(){
this.obj++;
},
decreasment(){
this.obj--;
}
}
})
但是如果公用同一个变量而不是返回值的话,三个值将都会改变,因为这三个按钮改变的都是一个值,而不是像一一return一样返回。其实这就是我们所看到的常见的实例化方式。
var vm=new Vue({
el:'#app',
data:{
count:0
}
});
而这往往不是我们想要的结果,因此组件要变成像函数一样的形式返回值