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

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

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

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

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

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

一、组件的创建与祖册

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

1.创建组件

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

2.注册组件

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

3.使用组件

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

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

你使用组件名的时候是需要先实例化Vue的，因为你的组件现在是扩展在Vue中，你要想使用Vue中的组件你就需要先实例化获得这个组件才能够使用

二、全局注册于局部注册

全局注册跟局部注册的区别就在于这个注册的地方不一致

全局注册就是只要是实例化Vue的范围都可以使用该组件

局部注册就是只能在某一个Vue实例的范围内使用该组件

如果你看到这里还不能理解下面我会写一个小例子给你

全局注册：

var global_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}})
以上就是创建组件以及局部注册的示例

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

var Children=Vue.extend({template:"<h2>Children</h2>"})var Parent=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":{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}}显示出来）