Vue.extend()构造器

来源：互联网发布：推荐好用的精华液知乎编辑：程序博客网时间：2024/06/03 13:56

Vue.js官网解释：

Vue.extend( options )

参数：

{Object} options

用法：

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数。

另：在网上看到的三个Vue.js的CND资源，推荐给需要的同学。

BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js；
unpkg(国外) : https://unpkg.com/vue/dist/vue.js；会保持和 npm 发布的最新的版本一致;
cdnjs(国外) : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js；

贴出写的Vue.extend()的demo,直接copy运行就OK了。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script src="https://unpkg.com/vue/dist/vue.js" charset="utf-8"></script></head><body><div id="mount"><animal></animal><hello></hello></div></body><script type="text/javascript">//Vue.extend()构造器,使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。//data 选项是特例，需要注意在 Vue.extend()中它必须是函数var animal = Vue.extend({//构造animal组件template:'<h1>I am is one {{animal}}</h1>',data:function(){return {animal:'cat'}}});var hello = Vue.extend({//构造hello组件template:'<h1>Hello World!</h1>',});new Vue({el:"#mount",//挂载元素components:{//注册组件'animal':animal,'hello':hello}})</script></html>

在项目中，用vue-cli脚手架搭建的项目：

template模板是一个单独的a.vue文件，成为a组件，然后用exprot default{}暴露接口，若b.vue需要引入a组件,在b.vue中用import引入a组件，再在b.vue文件中注册a.vue组件。

vue-cli的脚手架搭建网上有很多教程；

<!--a.vue--><template><h1>Hello World!</h1></template><script type="text/ecmascript-6">//暴露接口export default{};</script>

<!--b.vue--><template><aa></aa></template><script type="text/ecmascript-6">//a是a标签的关键字，所以需要用别名替代import a from "a.vue";export default{components:{"aa":a}};</script>

-------------------------------------------------分割线--------------------------------------------------------------------------

在官网看到的一个guthub的链接，很有意思摘取了一个小的demo:

https://github.com/vuejs/vue/blob/7b069453edbf7fd03363a63d040396d274a79757/test/unit/features/options/extends.spec.js

const A = {  data () {    return { a: 1 }  }}const B = {  extends: A,  data () {    return { b: 2 }  }}const vm = new Vue({el:"#app",  extends: B,  data: {    c: 3  }})console.log(vm.a);console.log(vm.b);console.log(vm.c);

阅读全文

0 0