浅谈vue当中的组件思想及注册

首先呢我们来了解一下组件思想

先来一些我们生活当中的组件例子-------手机的发展

最开始-----打电话，接电话

然后-------打电话，接电话，发短信，收短信，拍照。。。。

最后------打电话，接电话，发短信，收短信，拍照，上网等。。。。

我们把这些功能看成是一个组件，那大家觉得这些组件的优势是什么？

想必大家能够迅速的就知道了

第一：方便维护（摄像头坏了，修摄像头就行了）

第二：方便增减（某个功能可以进行增减）

等等。。。

简单来说功能和功能之间相互组合，又相互独立

再来说一下代码当中的组件思想

1：标准

有标准，我们大家写出来的代码通用性就会比较好

2：分支

把不同的代码封装到不同的组件当中，这样不同的组件就能够独立的生产，有利于独立的团队协作

3：重用

组件有问题，可以直接维护或者更换组件，提高开发效率

4：组合

组件通过组合的方式开发除一款新的产品

vue当中的组件思想就是，我们代码可以尽可能多的去进行重用，且尽可能的减少不必要代码冲突

组件的注册

全局注册语法

Vue.component（参数1，参数2）

参数1：自定义组件的名称

参数2：对象

{

data:function(){

return {data:"组件数据"}

},

template:'组件的内容'

}

具体案例

页面展示

ok，大家可以尝试一下

有同学问，模板当中是否可以有多个标签，可以的

模板字符串``

组件的命名方式

Vue.component("click-add",{...})

Vue.component("clickAdd",{...})

DOM当中

<click-add></click-add> 只有这一种写法

---------------------

局部注册

语法：

具体实例

相关代码

全局组件

dom

<div id="app">

<click-add></click-add>

</div>

<script>

// 全局注册组件

// Vue.component("自定义组件名",{

// data:function(){

// return {data:"组件数据"}

// },

// template:'组件的内容'

// })

// Vue.component("click-add",{

// data:function(){

// return {count:0}

// },

// template:'<button @click="count++">点击了{{count}}次</button>'

// })

// Vue.component("click-add",{

// data:function(){

// return {count:0}

// },

// template:'<button @click="add" >点击了{{count}}次</button>',

// methods:{

// add:function(){

// this.count++

// }

// }

// })

Vue.component("click-add",{

data:function(){

return {count:0}

},

template:`<div>

<h1>点击了{{count}}次<h1>

<button @click="add" >点击一下</button>

</div>`,

methods:{

add:function(){

this.count++

}

}

})

var vm=new Vue({

el:"#app",

data:{},

})

</script>

局部组件

dom：

<div id="app">

<click-add></click-add>

<hello-world></hello-world>

</div>

vue：

<script>

// 局部注册组件

var clickAdd={

data:function(){

return {count:0}

},

template:`<div>

<h1>点击了{{count}}次<h1>

<button @click="add" >点击一下</button>

</div>`,

methods:{

add:function(){

this.count++

}

}

};

var helloWorld={

data:function(){

return {message:"花花最近好像生病了"}

},

template:`<h1>{{message}}<h1>`,

};

var vm=new Vue({

el:"#app",

data:{},

components:{

"click-add":clickAdd,

"hello-world":helloWorld,

}

})

</script>