阅读 14

vue中的extend

vue.extend

Vue.extend 属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中需要使用Vue.extend + $mount

Vue官网实例

参数: {Object} options

用法: 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数

<div id="mount-point"></div>

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
复制代码

结果如下: <p>Walter White aka Heisenberg</p>

组件选项 extends(可理解为单继承,只接受一个extends)

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

        <div id='app'></div>
        <script>
            let father = {
                created(){
                    console.log('father的created()钩子')
                },
                data(){
                    return {
                        msg:'msg from father'
                    }             
                }
            }
            let child = new Vue({
                el:'#app',
                extends:father,
                data:{
                    msg:'msg from child' 
                },
                created(){
                    console.log('child的created钩子');
                    console.log(this.msg);
                }
            })
        </script>
    </body>
    //上面例子表明了extends可以继承生命周期钩子函数.
    
    
    
        <body>
        <div id='app'></div>
        <script>
            let father = {
                created(){
                    console.log('father的created()钩子')
                },
                data(){
                    return {
                        msg:'msg from father'
                    }             
                },
                methods:{
                    say(){
                        console.log('hello world');
                    }
                }
            }
            let child = new Vue({
                el:'#app',
                extends:father,
                created(){
                    console.log('child的created钩子');
                    console.log(this.msg);
                    this.say();
                }
            })
        </script>
    </body>
    
    进一步得出结论:extends甚至还能继承data和methods(当然重写会覆盖)
extends使得组件能像面向对象变成一样便于拓展。
    
复制代码