【vue】vue组件化开发

组件化开发思想

标准
分治
重用
组合

组件化需要解决的问题：

• 我们希望尽可能多的重用代码
• 自定义组件的方式不太容易
• 多次使用组件可能导致冲突

组件化规范：Web Components
（通过创建封装好功能的定制元素解决上述问题）

全局组件注册

在使用组件之前，我们需要注册组件
注册组件的语法为：

Vue.component(name//组件名称,{
data:,//组件数据
template:})//template组件模板内容

//实例
        Vue.component("button-counter", {
            data: function(){
                return { count: 0 }
                },
            template:"点击了{{count}}次"
        })

需要注意的是：

• data必须的函数，可以形成一个闭包的环境，可以保证每一个组件都拥有一份独立的数据

• 组件模板的内容必须是单个的根元素

错误：

        Vue.component("button-counter", {
            data: function(){
                return { count: 0 }
                },
            template:"点击了{{count}}次"

正确：

Vue.component("button-counter", {
      data: function(){
       return { count: 0 }
     },
            template:"
点击了{{count}}次
"

• 组件模板内容可以是模板字符串
  模板字符串需要浏览器提供支持（ES6语法）
  从上面的代码可以看出来，如果说我们按照现在现在的情况来写的话，可读性比较低，为了增加其可读性，可以采用模板字符串的方式
  如下：

Vue.component("button-counter", {
      data: function(){
       return { count: 0 }
     },
            template:`

            点击了{{count}}次
            
            
`

组件命名

如果在定义组件的时候，使用了驼峰法进行命名，那么在普通标签模板中，必须使用短横线的方式使用组件，但是，在字符串模板中可以使用该驼峰命名的组件
如下：

<div>
<helloWorld></helloWorld>//错误
<hello-world></hello-world>//正确
Vue.component("button-counter", {
      data: function(){
       return { count: 0 }
     },
            template:`

            点击了{{count}}次
            
            //可以使用
            
`

Vue.componet("helloWorld",{
})//定义helloWorld组件

局部组件注册

在vue的实例中添加额外的属性：componets,在此注册局部组件

局部组件只能在在注册的父组件中使用

Vue.componet("newcomponet",{
date:function(){
},
template:"
<hello-world></hello-world>//这里不能使用
"

})
var vm=new Vue(
{el:,
data:,
components:"
"hello-world":
"
})