關于vue中extend,mixins,extends,components,install的操作

來源：懂視網責編：小采時間：2020-11-27 19:33:50

關于vue中extend,mixins,extends,components,install的操作

關于vue中extend,mixins,extends,components,install的操作:這篇文章主要介紹了關于vue中extend,mixins,extends,components,install的操作，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下前言你知道extend,mixins,extends，components,install用法嗎你知道他們的區別嗎你知道他們

推薦度：

點擊下載本文 文檔為doc格式

導讀關于vue中extend,mixins,extends,components,install的操作:這篇文章主要介紹了關于vue中extend,mixins,extends,components,install的操作，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下前言你知道extend,mixins,extends，components,install用法嗎你知道他們的區別嗎你知道他們

1.Vue.extend

1.使用vue構造器,創建一個子類,參數是包含組件選項的對象;
2.是全局的

// 創建構造器
var Profile = Vue.extend({
 template: '<p>{{extendData}}</br>實例傳入的數據為:{{propsExtend}}</p>',//template對應的標簽最外層必須只有一個標簽
 data: function () {
 return {
 extendData: '這是extend擴展的數據',
 }
 },
 props:['propsExtend']
})
// 創建 Profile 實例，并掛載到一個元素上。可以通過propsData傳參.
new Profile({propsData:{propsExtend:'我是實例傳入的數據'}}).$mount('#app-extend')

結論:
Vue.extend實際是創建一個構造器,對應的初始化構造器,并將其掛載到標簽上

github源碼,請戳這里 ,歡迎star

2.Vue.component

1.將通過 Vue.extend 生成的擴展實例構造器注冊（命名）為一個全局組件,參數可以是Vue.extend()擴展的實例,也可以是一個對象(會自動調用extend方法)
2.兩個參數,一個組件名,一個extend構造器或者對象

//1.創建組件構造器
 var obj = {
 props: [],
 template: '<p><p>{{extendData}}</p></p>',//最外層只能有一個大盒子,這個和<tempalte>對應規則一致
 data: function () {
 return {
 extendData: '這是Vue.component傳入Vue.extend注冊的組件',
 }
 },
 };

 var Profile = Vue.extend(obj);

 //2.注冊組件方法一:傳入Vue.extend擴展過得構造器
 Vue.component('component-one', Profile)

 //2.注冊組件方法二:直接傳入
 Vue.component('component-two', obj)

 //3.掛載
 new Vue({
 el: '#app'
 });

 //獲取注冊的組件 (始終返回構造器)
 var oneComponent=Vue.component('component-one');
 console.log(oneComponent===Profile)//true,返回的Profile構造器

3.mixins

值可以是一個混合對象數組,混合實例可以包含選項,將在extend將相同的選項合并
mixins代碼:

 var mixin={
 data:{mixinData:'我是mixin的data'},
 created:function(){
 console.log('這是mixin的created');
 },
 methods:{
 getSum:function(){
 console.log('這是mixin的getSum里面的方法');
 }
 }
 }

 var mixinTwo={
 data:{mixinData:'我是mixinTwo的data'},
 created:function(){
 console.log('這是mixinTwo的created');
 },
 methods:{
 getSum:function(){
 console.log('這是mixinTwo的getSum里面的方法');
 }
 }
 } 

 var vm=new Vue({
 el:'#app',
 data:{mixinData:'我是vue實例的data'},
 created:function(){
 console.log('這是vue實例的created');
 },
 methods:{
 getSum:function(){
 console.log('這是vue實例里面getSum的方法');
 }
 },
 mixins:[mixin,mixinTwo]
 })
 
 //打印

結果為: 這是mixin的created 這是mixinTwo的created 這是vue實例的created 這是vue實例里面getSum的方法

結論:
1.mixins執行的順序為mixins>mixinTwo>created(vue實例的生命周期鉤子);
2.選項中數據屬性如data,methods,后面執行的回覆蓋前面的,而生命周期鉤子都會執行

3.extends

extends用法和mixins很相似,只不過接收的參數是簡單的選項對象或構造函數,所以extends只能單次擴展一個組件

var extend={
 data:{extendData:'我是extend的data'},
 created:function(){
 console.log('這是extend的created');
 },
 methods:{
 getSum:function(){
 console.log('這是extend的getSum里面的方法');
 }
 }
 }

 var mixin={
 data:{mixinData:'我是mixin的data'},
 created:function(){
 console.log('這是mixin的created');
 },
 methods:{
 getSum:function(){
 console.log('這是mixin的getSum里面的方法');
 }
 }
 }
 
 
 var vm=new Vue({
 el:'#app',
 data:{mixinData:'我是vue實例的data'},
 created:function(){
 console.log('這是vue實例的created');
 },
 methods:{
 getSum:function(){
 console.log('這是vue實例里面getSum的方法');
 }
 },
 mixins:[mixin],
 extends:extend
 })
 
 //打印結果
 這是extend的created
 這是mixin的created
 這是vue實例的created
 這是vue實例的getSum里面的方法

結論:
1.extends執行順序為:extends>mixins>mixinTwo>created
2.定義的屬性覆蓋規則和mixins一致

4.components

注冊一個局部組件

//1.創建組件構造器
 var obj = {
 props: [],
 template: '<p><p>{{extendData}}</p></p>',//最外層只能有一個大盒子,這個和<tempalte>對應規則一致
 data: function () {
 return {
 extendData: '這是component局部注冊的組件',
 }
 },
 };

 var Profile = Vue.extend(obj);
 
 //3.掛載
 new Vue({
 el: '#app',
 components:{
 'component-one':Profile,
 'component-two':obj
 }
 });

5.install

1.是開發vue的插件,這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象(可選)
2.vue.use方法可以調用install方法,會自動阻止多次注冊相同插件

 var MyPlugin = {};
 MyPlugin.install = function (Vue, options) {
 // 2. 添加全局資源,第二個參數傳一個值默認是update對應的值
 Vue.directive('click', {
 bind(el, binding, vnode, oldVnode) {
 //做綁定的準備工作,添加時間監聽
 console.log('指令my-directive的bind執行啦');
 },
 inserted: function(el){
 //獲取綁定的元素
 console.log('指令my-directive的inserted執行啦');
 },
 update: function(){
 //根據獲得的新值執行對應的更新
 //對于初始值也會調用一次
 console.log('指令my-directive的update執行啦');
 },
 componentUpdated: function(){
 console.log('指令my-directive的componentUpdated執行啦');
 },
 unbind: function(){
 //做清理操作
 //比如移除bind時綁定的事件監聽器
 console.log('指令my-directive的unbind執行啦');
 }
 })

 // 3. 注入組件
 Vue.mixin({
 created: function () {
 console.log('注入組件的created被調用啦');
 console.log('options的值為',options)
 }
 })

 // 4. 添加實例方法
 Vue.prototype.$myMethod = function (methodOptions) {
 console.log('實例方法myMethod被調用啦');
 }
 }

 //調用MyPlugin
 Vue.use(MyPlugin,{someOption: true })

 //3.掛載
 new Vue({
 el: '#app'
 });