关于Vue.js 组件的使用及其概念

首先我们来看看 vue.js官网对于组件的描述


那么组件到底是一个什么东西呢,用一句简短的话来描述：

组件就是可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。

看到这里你可能会觉得比较抽象

那么我们来写几个例子来学习一下vue.js的组件

一、组件的创建与祖册

一个组件能够使用一定通过了三个步骤

1.创建组件

创建组件的概念即在Vue构造函数中通过extend()方法添加该组件（ps：你可以理解在开学第一天的时候，老师不认识你，但是知道有张三这个人）

2.注册组件

注册组件的概念即在Vue够着函数中通过一个属性名与之管理在一起，有点像vartemp=1;这个时候 temp就是1了（ps：这个时候老师把你跟花名册上的人对应起来了）

3.使用组件

使用组件这个时候你就可在dom中添加你创建的组件名（ps：这个时候你终于可以以你的名义去干点什么了比如上课，看书啥的）

*这里是有一个前提条件的

你使用组件名的时候是需要先实例化Vue的，因为你的组件现在是扩展在Vue中，你要想使用Vue中的组件你就需要先实例化获得这个组件才能够使用
二、全局注册于局部注册
全局注册跟局部注册的区别就在于这个注册的地方不一致
全局注册就是只要是实例化Vue的范围都可以使用该组件
局部注册就是只能在某一个Vue实例的范围内使用该组件
如果你看到这里还不能理解下面我会写一个小例子给你
全局注册：

varglobal_conponent=Vue.extend({
template:"<h1>我是一个全局组件</h1>"	//创建组件
})
Vue.component("my-

global

-component",global

_conponent)

// 注册的全局组件

以上就是创建组件以及全局注册的示例
局部注册：

var

tempComponent

=Vue.extend({

template:"<h1>我是一个全局组件</h1>" //创建组件 })

new Vue({
el:"#app3",
data:{},
methods:{},
components:{
'temp-compoent':tempComponent
}
})

以上就是创建组件以及局部注册的示例

三、父子组件的创建以及注册

varChildren=Vue.extend({
template:"<h2>Children</h2>"
})

varParent=Vue.extend({
template:"<h2>Parent<child></child></h2>",
components:{
"child":Children
}
})

Vue.component("parent",Parent)
new Vue({
el:"#div1",
data:{},
methods:{}
})

该代码为全局注册的父子组件

new Vue({
el:"#div1",
data:{},
methods:{},
components:{
'item':{
template:"<h2>Parent<child></child></h2>",
components:{
"child":{
4000

template:"<h2>Children</h2>"
}
}
}
}
})

这段代码是局部注册的嵌套父子组件，是不是感觉剪短了不少

再来一段父子组件的数据通信

<div id="myDiv">
<parent :mymsg="msg"></parent>
</div>

new Vue({
el:"#myDiv",
data:{
"msg":"传值数据"
},
components:{
'parent':{
data:function(){
return {"mydata":123}
},
props:['mymsg'],
template:"<h1>局部父组件{{mydata}}{{mymsg}}<child  :childmsg='mymsg'></child></h1>",
components:{
'child':{
props:['childmsg'],
template:"<h3>局部子组件{{childmsg}}</h3>"
}
}
}
}
})

这样就可以达到父子通信的目的（ps：你可以理解为props[xxx]  把钱拿过来了，用:xxx="父级数据"  放在你口袋里了   最后{{xxx}}显示出来）