I accidentally saw some projects used vue.extend this API, and then looked at the document, really can not think of the use of the scene, and then after a baidu, then read a wave of Element UI source code, know vue.extend can be used so, the next is a brief talk about the use of this API.

usage

Vue.extend(options), you can see that the API takes an object as an argument. This object is an object that contains component options, i.e., a component.

Watch a chestnut
<div id="app"> {{message}} <div id="mount-point"></div> </div> <script> let VM = new Vue({ el: '#app', data: { message: 'Hello Vue! ' } }) var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg'}}}) // Create a Profile instance, call $mount to replace the specified element new Profile().$mount('#mount-point') New Vue({data: {message: 'Hello Vue! '}) </script> $mount = 'mount'; New Vue({data: {message: 'Hello Vue! ' } }).$mount('#app)Copy the code
Extend inside Element UI

We can see from element UI source code that extend implements many global components, such as loading, alert, message, etc. Extend and add the component to Vue’s prototype for easy calls to this. XXX. I accidentally saw some projects used vue.extend this API, and then looked at the document, really can not think of the use of the scene, and then after a baidu, then read a wave of Element UI source code, know vue.extend can be used so, the next is a brief talk about the use of this API.

Extend inside Element UI

We can see from element UI source code that extend implements many global components, such as loading, alert, message, etc. Extend and add the component to Vue’s prototype for easy calls to this. XXX.

The component is imported from a JS file, and then attached to the specified element by vue.extend (Componented) in the JS file.

Well, you can use this method to write some global components in your project later….