最近一直在学习vue.js,看了一些视频还有官方文档,但是发现,在官方文档中所讲解的有关vue组件相关的内容不是很好理解,因此根据我本人的一些理解,将vue中创建组件的方法写下来(如有相同,纯属巧合)。
一.关于vue的组件的创建(全局组件,局部组件)
1.全局组件
全局组件,我们一般用Vue.component({});来注册。
例子如下:
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<blog-post title="my journey with Vue1"></blog-post>
<blog-post title="my journey with Vue2"></blog-post>
<blog-post title="my journey with Vue3"></blog-post>
</div>
``
Vue.component('button-counter',{
data:function () {
return{
count: 0
}
},
template: '<button @click="count++">You clicked me {{ count }} times.</button>'
});
Vue.component('blog-post',{
props:['title'],
template:'<h3>{{ title }}</h3>'
});
var vm1 = new Vue({
el: '#components-demo',
data:{
},
methods:{
}
});
结果:![上述代码的结果](https://img-blog.csdnimg.cn/20190813135328740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM3NjYzOQ==,size_16,color_FFFFFF,t_70)
全局创建组件表示,该组件可以在这个vue文件中的任何一个作用域内使用。
2.局部组件、
局部组件与全局组件的不同之处在于,局部组件只能在创建该组件所在的作用域内使用。
下面表示出局部组件创建的4种方式(个人认为第4种比较方便)
<!--第四种创建局部组件的方式-->
<template id="tmp1">
<div>
<h1>这是我创建的第四个组件</h1>
</div>
</template>
//第一种创建局部组件的方式
var myComponent1 = {
template: '<div>this is a component1!</div>'
};
//第二种创建局部组件的方式
var myComponent2 = Vue.extend({
template: '<div>this is a component2!</div>'
});
var vm = new Vue({
el : "#app",
data : {
msg : "123456",
count: 0,
msg1 : '5555',
rawHtml:"<h1>haha</h1>",
seen: false,
message: "cdsa cid qwo gfdjskl",
items:[
{message:"111"},
{message:"222"},
{message:"333"}
],
object:{
title:"123456",
name:"liu",
age:"22",
school:"beijing"
},
},
methods : {
push1:function () {
return this.items.push({message:"123"});
},
pop:function () {
return this.items.pop()
},
shift:function () {
return this.items.shift()
},
unshift:function () {
return this.items.push({message:"fdsac"});
},
},
computed:{
reversedMessage:function () {
return this.message.split(' ').reverse().join(' ');
}
},
components:{
'myComponent1': myComponent1,
'myComponent2': myComponent2,
//第三种创建局部组件的方式
'myComponent3':{
template:"<h2>这是我创建的第三个组件</h2>"
},
//第四种创建局部组件的方式(对应上面)
'myComponent4':{
template:"#tmp1"
}
}
})
因为在我们自己创建的组件中不能包含多个标签,所以我们的组件所包含的标签都需要在一个div下,因此第4中方法,个人觉得比较方便。
还有注意的一点就是,如果将局部组件放在不属于它的作用域内使用时会报错,例如:
<div id="components-demo">
<my-component1></my-component1>
</div>
也使用的上述代码,上述组件时在#app这个作用域内创建的,如果我将上述创建的组件放在#components-demo中,
将会出现“[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
(found in )”该错误。
上述的内容,是我根据自己的理解写的一点总结,随着学习的深入,我将继续更新有关我所遇到的Vue的一些问题,或者个人理解。