vue之extend，component 、mixins、ext

2018-07-17 本文已影响159人 world_7735

1、Vue.component()定义一个Vue组件
2、new Vue（）创建一个 Vue 的根实例；
3、Vue.extend()扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器;
4、mixins: [mixin1, mixin2]是对父组件的扩充，包括methods、components、directive等；
5、extends: CompA是对父组件的扩充，与mixins类似，但优先级均次于父组件

extend 是构造一个组件的语法器，你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用apple组件

var apple = Vue.extend({ 
…. 
}) 
Vue.component(‘apple’,apple)

你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件

new Vue({ 
components:{ 
apple:apple 
} 
})

Vue.component你可以创建，也可以取组件例如下

var apple = Vue.component(‘apple’)

Vue.component('my-component', { ... })
等同于
var myComponent = Vue.extend(...)
Vue.component('my-component', myComponent)

案例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    .closesou{font-size:30px;color:red;cursor: pointer;}
</style>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>
<body>
<div id="app">
    <global></global>
</div>
    
<script>
let options = {
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
   firstName: 'Walter',
   lastName: 'White',
   alias: 'Heisenberg'
  }
 },
 created(){
  console.log('onCreated-1');
 },
  mounted(){
  console.log('onCreated-2');
 }
};
let BaseComponent = Vue.extend(options);
new Vue({
  el: '#app',
  components:{
    'global':BaseComponent
  }
})
</script>
</body>
</html>

混合mixins和继承extends
（1）、基础

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    .closesou{font-size:30px;color:red;cursor: pointer;}
</style>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{name}}
</div>
<script>
const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
new Vue({
  el: '#app',
  mixins:[mixin1, mixin2],
  extends: extend,
  data () {
    return {
     name: 'name'
    }
   },
})
</script>
</body>
</html>

结果：
前提没有声明其他方法：只声明data前提下（下面结果是因为同步的原因）

如果父类data不声明name值，data中的变量都会被重写结果为：mixin2 name，以子类的为准。
如果父类打他声明name值，data中的变量将会最后继承的父类为准结果为：name。

（2）、其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    .closesou{font-size:30px;color:red;cursor: pointer;}
</style>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <global></global>
    <optionds></optionds>
</div>
<script>
let extend = {
 created(){
  console.log('extends created')
 }
};
let mixin1  = {
 created(){
  console.log('extends mixin1 ')
 }
};
let mixin2  = {
 created(){
  console.log('extends mixin2')
 }
};
new Vue({
  el: '#app',
  extends: extend,
  mixins:[mixin1, mixin2],
  created(){
    console.log('created')
  },
})
</script>
</body>
</html>

控制台输出

extends created
mixin1 created
mixin2 created
created

结论: （基于异步处理）

优先调用mixins和extends继承的父类，extends触发的优先级更高，相对于是队列
push(extend, mixin1, minxin2, 本身的钩子函数)
经过测试， watch的值继承规则一样。

vue之extend，component 、mixins、ext

猜你喜欢

热点阅读