Vue中的組件是可以被繼承和擴展的,這樣可以使開發者的代碼更加簡潔和可復用。在Vue中,繼承和擴展都是通過使用父組件和子組件來實現的。
父組件是被擴展和繼承的組件,子組件是繼承自父組件并添加新的功能的組件。在Vue中,我們可以使用extend方法來創建一個組件的子類。
// 創建一個父組件 var Parent = Vue.extend({ template: '{{msg}}', data: function(){ return { msg: 'Hello World!' } } }) // 創建一個子組件 var Child = Parent.extend({ created: function(){ console.log('child component was created') } }) // 使用子組件 new Child().$mount('#app')
在上面的代碼中,我們首先使用Vue.extend創建了一個名為Parent的組件,該組件包含一個模板和一個初始數據msg。接下來,我們使用Child.extend來創建一個Child子組件,并在該組件的created函數中進行了額外處理。最后,我們通過new Child()實例來使用子組件,并將其掛載到DOM中。
除了使用extend方法之外,Vue還提供了一個mixins功能,可以將父組件和子組件中相同的功能提取到一個混合對象中進行復用。
// 創建一個混合對象 var mixins = { methods: { sayHello: function(){ console.log('Hello!') } } } // 創建一個父組件 var Parent = Vue.extend({ mixins: [mixins], template: '{{msg}}', data: function(){ return { msg: 'Hello World!' } } }) // 創建一個子組件 var Child = Parent.extend({ methods: { sayBye: function(){ console.log('Bye!') } } }) // 使用子組件 var child = new Child() child.$mount('#app') child.sayHello() // Hello! child.sayBye() // Bye!
在上面的代碼中,我們首先創建了一個混合對象mixins,該混合對象中包含了一個方法sayHello。然后,我們在創建父組件Parent時將該混合對象作為參數傳入。接下來,我們創建一個子組件Child,并在該組件中添加了一個方法sayBye。最后,我們實例化Child組件并將其掛載到DOM中,并在實例中調用混合對象中的sayHello方法和子組件中的sayBye方法。
至此,我們已經了解了Vue中組件的繼承和擴展以及混合對象的使用,這些功能可以使我們的代碼更加簡潔和可復用。在實際開發中,建議根據具體的業務需求合理利用這些功能。
上一篇c#+遍歷json+對象
下一篇vue jq寫哪