vue 组件

vue组件
1.组件化思维
组件化针对的是页面中的整个完整的功能模板划分 （项目的分工）
2.组件的概念（ 一个文件 ）
组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体

优点：代码复用，便于维护
划分组件的原则：复用率高的，独立性强的

3.Vue中如何定义， 使用， 操作组件
组件
（1）. Vue.extend() ===> 组件中也可以书写 Vue这个构造器函数中 options
（2）. Vue.component() 为什么要执行这个方法呢？

组件的表现形式是标签，组件要想合法化， 必须注册
（1）.vue.js文件中暴露出一个Vue的构造器函数， 这个函数的作用，是用来实例化出来一个实例， 那么这个实例也是一个组件， 我们称之为 ‘根实例’
（2）. 我们从vue detools中我们发现这个实例的表现形式是一个标签
（3）. Vue为了扩展功能， 给了一个方法 ， 这个方法叫 extend
（4）. 我们对比 Vue vs Vue.extend() 我们发现这两个方法输出结果都是两个构造器函数， 并且很相似
（5）. 那么我们进一步得到一个结果： 使用方法一致吗？
new Vue.extend() 报错 不需要进行实例化 ， 它希望组件的表现形式应该是标签
要想像标签一样使用， 必须准守 h5 的标准 ， 也就是说组件必须合法 ， 要想合法， 必须注册（登记）

组件使用前必须注册

4.组件的注册有两种方式

  1. 全局注册
    简写: Vue.component(组件的名称，options )
  2. 局部注册
    new Vue({
      components: {
        组件名： 组件的配置项
      }
    })

组件命名建议使用两种方式

  使用 kebab-case
    举例
    Vue.component('header-title'{})

  使用 PascalCase
    举例：
    Vue.component('MyComponentName',{/*...*/})

5.组件的嵌套
（1）.全局组件嵌套

HTML：
    <div id="app">
        <Father></Father>
    </div>

script:
    Vue.Compontent('Father',{
        template: '<h3> father <Son></Son></h3>'
    })
    Vue.Compontent('Son',{
        template: '<h3> son</h3>'
    })

    new Vue({
        el:'#app'
   }).

2.局部组件嵌套

HTML：
    <div id="app">
        <Father></Father>
    </div>

script:
    new Vue({
        el:'#app',
        compontents:{
            'Father':{
                template:'<div>father <Son></Son></div>'
                compontents:{
                    'Son':{
                        template:'<h3>son</h3>'
                    }
                }
            }
        }
   })

6.组件外用：组件里的template是存放代码区，然而代码多的话，视图会难看，所以外用一下
代码：

html：
    <div id="app">
        <Hello></Hello>
    </div>
    <template id="Hello">
        <div class="content">
            <ul>
                <li><a href="">你好</a></li>
                <li><a href="">你好</a></li>
                <li><a href="">你好</a></li>
            </ul>
        </div>
    </template>

script：
    Vue.component('Hello',{
        template: '#Hello'
    })
    new Vue({
        el: '#app',
    })

7.组件模板的根元素唯一：
（1）. 组件的template如果body里面的话，一定记住要放在 #app 的div外
（2）. 组件的template在body中使用的话， 是不会解析的， 但是组件内的template是会解析的
（3）. 组件的模板中的直接子元素必须有一个， 如果你要有多个， 必须使用v-if v-else-if

8.组件的data选项
根实例中的data选项是一个对象，但是组件中的data选项是一个函数，为什么？
解释：
函数的作用：
（1）.函数有独立作用域
（2）.函数可以有return 返回值。
组件的data选项必须有return 返回值，并且返回值是一个对象
组件的数据在组件的模板中使用
示例：

html：
    <div id="app">
        <Hello></Hello>
    </div>
    <template>
        <div>
            {{ msg }}
        </div>
    </template>
script:
    Vue.compontent('Hello',{
        template:'#Hello',
        data(){
            return{
                msg:'hello'
        }
    }
})
    new Vue({
        el:'#app'
})