2.2 Vue 组件化的深入

组件化

组件是Vue.js最强大的功能之一

• 可以扩展HTML元素,封装可重用代码。
• 在较高层面上是自定义的元素,Vue.js的编译器为它添加特殊功能。
• 在有些情况下也可以是原生HTML元素的形式,以is特性扩展。

组件创建

1. 调用 Vue.extend(),创建名为myComp的组件, template定义模板的标签,模板的内容需写在该标签下。

   var myComp = Vue.extend({
      template: '<div>只是我的组件</div>'
   })
   

2. <template>标签创建，需要加上id属性。

   <template id="myComp">
       <div>这是template标签构建的组件</div>
   </template>
   

3. <script>标签创建，需加id属性，同时还得加type="text/x-template"不执行编译里面的代码

   <script type="text/x-template" id="myComl">
       <div>这是script标签构建的组件</div>
   </script>
   

组件注册

• 全局注册
  1.调用Vue.extend(), 创建名为myComp的组件全局注册

  Vue.component('my-comp',myComp)
  

  2.template及script标签构建的组件全局注册

  Vue.component('my-comp',{
      template: '#myComp'
  })
  

• 局部注册
  1.调用Vue.extend(), 创建名为myComp的组件局部注册（只能在注册该组件的实例中使用，一处注册，一处使用）

  var app = new Vue({
      el: '#app',
      components: {
          'my-comp': myComp
      }
  })
  

  2.template及script标签构建的组件局部注册。

   var app = new Vue({
       el: '#app',
       components: {
           'my-comp': {
               template: '#myComp'
           }
       }
   })
  

处理边界情况

1. 访问根实例

   // 获取根组件的数据
   this.$root.foo
   
   // 写入根组件的数据
   this.$root.foo = 2
   

2. 访问父级组件实例

   <google-map>
       <google-map-region v-bind:shape="cityBoundaries">
           <google-map-markers v-bind:places="iceCreamShops">
           </google-map-markers>
       </google-map-region>
   </google-map>
   
   this.$parent.XXX
   

3. 访问子组件实例或子元素

   // 通过ref特性为这个子组件赋予一个ID引用
   <base-input ref="usernameInput"></base-input>
   
   // 访问usernameInput子组件
   this.$refs.usernameInput
   

4. 依赖注入

   // 地图组件的完善
   provide: function () {
       return {
           getMap: this.getMap
       }
   }
   inject: ['getMap']
   

混入（mixin）

混入（mixin）基本用法

混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

// 定义一个混入对象
var myMixin = {
    created:function () {
        this.hello()
    },
    methods: {
        hello:function () {
            console.log('hello from mixin!')
        }
    }
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
    mixins:[myMixin]
})
var component = new Component() // => "hello from mixin!"

mixin全局混入

混入也可以进行全局注册。使用时格外小心! 一旦使用全局混入,它将影响每一个之后创建的Vue实例。使用恰当时, 这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项‘myOption’注入一个处理器
Vue.mixin({
    created: function () {
        var myOption = this.$options.myOption
        if(myOption) {
            console.log(myOption)
        }
    }
})

new Vue({
    myOption: 'hello!'
})
// => "hello!"

mixin选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

var mixin = {
    data: function () {
        return {message:'hello',foo:'abc'}
    }
}
new Vue({
    mixins: [mixin],
    data: function () {
        return {message:'goodbye',bar:'def'}
    },
    created: function () {
        console.log(this.$data)
        // => {message:"goodbye",foo:"abc",bar:"def"}
    }
})