从零认识Vue 组件extend

Vue.extend

​ 1. 通过实例化Vue构造器函数得到一个Vue实例,这个实例我们称之为’根实例’，它是最大的父级

​ 2. 这个根实例是以标签的形式存在的，那么我们也称之为’ 根组件 ’

​ 3. 根实例也是一个组件，但是我们得到只是跟组件

​ 4. Vue.extend() 它就是对Vue功能的扩展，这个扩展就是组件

​ 5. Vue是通过 Vue.extend() 来实现【 扩展 】 Vue的功能的，这个功能就是组件

​ 6. Vue.extend如何使用？

​ - 通过new Vue.extend() 发现和new Vue一样了

console.log( Vue ) 
console.log( Vue.extend())

​ - 组件就是一个以标签化呈现的东西，所以我应该像标签一样使用

​ - 但是无论是 html3 还是 html5 肯定不会同意它随意来个标签的

​ - Vue会将组件编译成html结构

​ - Vue的这个处理过程，我们称之为 ’ 组件注册

​ 总结:

​ 1. Vue是通过Vue.extend() 来实现组件的

​ 2. Vue的组件的使用时需要注册的

Vue-组件的注册

​ 全局注册—完整

const Hello = Vue.extend({
    template: '<div> Hello 组件 </div>'
  })
  // Vue.component( 组件的名称,组件的配置 )
  Vue.component( 'Hello', Hello )

全局注册—简写

Vue.component( 'Hello', {
    template: '<div> Hello 组件 </div>'
  })

局部注册

/* 
    局部注册使用  components选线来完成
    局部注册只在当前注册的实例范围内有效
 */
new Vue({
    el: '#app',
    components: { //局部注册组件的选项
      // 组件的名称： 组件的选项
      'Hello': {
        template: '<div> Hello 这里是局部注册 </div>'
      }
    }
  })

使用规则

直接父子级关系的标签
      ul li 
      ol li
      table tr  td
      dl dd dt
      select 
我们使用is属性来解决

 <标签 is = "Hello"></标签>

动态组件

<div id="app">
    <button @click = "typeChange"> 点击 </button>
    <keep-alive>
      <component :is = "type"></component>
    </keep-alive>
  </div>
  <template id="hello-box">
    <div>
      <h3> 手机号登录 </h3>
      <div> 123 </div>
    </div>
  </template>

全局

new Vue({
    el: '#app',
    data: {
      type: 'PhoneLogin'
    },
    methods: {
      typeChange () {
        // this.type = this.type === 'PhoneLogin' ? 'UserLogin': 'PhoneLogin'
        this.type = (this.type === 'PhoneLogin') && 'UserLogin' || 'PhoneLogin'
      }
    },
    components: {
      'PhoneLogin': {
        template: '#hello-box'
      },
      'UserLogin': {
        template: '<div> 用户名密码登录</div>'
      }
    }
  })

局部

/* 
    组件的嵌套： 
        1. 子组件以标签的形式要在父组件的模板中使用
  */
  new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })

总结

1. 组件中的data选项是一个函数，而根实例中是对象
   1. 组件是一个独立的整体，那么数据也应该是一个独立的
   2. 多人开发，数据如果不是独立的，那么数据会冲突
   3. javascript最大的特点： 函数式编程，而函数本身就有一个独立作用域
2. 为什么组件中的data函数要有返回值，并且返回值是一个对象，不能是其他的吗？
   1. 因为data选项要经过es5 Object.defineProperty 属性进行getter和setter设置 
3. 数据中数据的使用
   组件的数据，使用范围只能在组件的模板中