vueextends的简单介绍

本篇文章给大家谈谈vueextends，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue - 组件和Vue.extend
• 2、Vue中extend组件的用法
• 3、vue组件继承并重写属性方法
• 4、Vue核心知识-Vue的组件之组件的继承

Vue - 组件和Vue.extend

在初学 Vue 的时候,都是利用 cdn 的方式在一个页面中导入 vue.js 的库文件.

接着,肯定就学到了组件开发.

当然,也是在单页面中.

API文档告诉我们

在后来,学到了使孙没雹用 vue-cli 搭配 .vue 模板的方式开发组件.

好了,三种组件创建的方式说完了,且在各自的环境里都能够正常的运作.

在 Vue 开发中,所有的组件本质上都是由一个继承自 Vue 的构造函数创建的.

比如在注册局部组件时.

从视觉上,我们看到 TodoListComp 只是一个普通的 Object 对象.

直接赋值给了其他组件的 components 属性里.

然后,这个组件就成为则帆了一个局部组件,并可以在注册了当前组件的内察宴部去使用了.

那它在内部做了什么,导致这个普通的对象最后可以被当成是一个正常的组件来使用呢?

比如,普通对象上都没有 $el 之类的属性.丢给 components 之后,就啥都有了.

使用Vue.extend(options)会根据传入的options创建一个VueComponent的组件构造函数并返回.

既然使用 Vue.extend 会返回一个组件的构造函数.

那么我们就可以使用 new 这个返回的构造函数

并手动的 mount 并替换某个 dom 节点(就和 new App() 一样)

前面,我么已经知道了,所有的 vue 组件,不管是全局的还是局部的.

都是利用 Vue.extend 方法构建并返回出一个继承自 Vue 的组件构造函数.

这个函数接受一个满足了 Vue 组件属性项的普通的 Object 对象.

在.vue模板文件开发中,也不例外.

我们可以看看,在书写 .vue 模板文件时,我们到底在写什么?

我们写的是一个 .vue 文件.

并按照 template/template script/script ( 这里不关注 style/style 节点 ) 的格式编写 .vue 文件.

把它整合起来来看.

等价于

好了,继续回到 .vue 模板开发文件中.

在另外一个组件中,使用此组件时,我们会 import xxx from xxx.vue 并搭配 components:{ xxxx }

.vue 会被 webpack 中配置的 vue-loader 处理.这是我们已知的.

结合上述的判断, vue-loader 仅仅只是把 .vue 文件编译成了一个 vue.extend(options) 创建组件所需要的 options 普通对象而已.

既然 vue-loader 仅仅,只是把 .vue 模板文件编译成了一个 options 普通对象.

那么我们可以手动的使用 Vue.extends(options) 来获得这个组件对象的构造函数.

拿到此组件的构造函数,我们就可以在 组件 mounted 的时候,通过 new 的方式,挂在到 html 上了. (而无需去注册到 components,成为一个局部组件.直接把它当成一个自己熟悉的不能在熟悉的构造函数调用即可.)

既然我们已经知道:

我们完全可以直接使用 .js 文件的方式来创建 vue 组件,进而省略 .vue vue-loader 这个执行的步骤.

此 .js 文件到处一个 vue 组件的构造函数.

在另外一个组件里

通过这样的原理,我们完全可以在HTML页面的任意地方,任意位置,任意的挂在我们自己的组件.并不一定必须使用.vue声明式组件的语法.

[ 码云地址 ]

[img]

Vue中extend组件的用法

Vue.extend的用法

一、 extend创建的是一个组件构造器，而不是一个具体的组件实例

    所以他不能直接在new Vue中这样使用： new Vue({components: first})

   最终还是要通过Vue.components注册才可以使用的。

      创建一个div容器放置组件

二、在实例化extends组件构造器时，传入属性指念手必须是propsData、而不是props。另外，无论是Vue.extend还是Vue.component 里面的data定义都必须是函数返回对象，如 Vue.extend({data: function () {return {}}})。除了高罩new Vue可以直接对data设置对象之外吧，如唯嫌 new Vue({data: {}});

vue组件继承并重写属性方法

1、Vue.extend()

vue 中 通过 Vue.extend() 函数来创建一个“子类”。

Vue.extend() 的清闹参数是一个包含组件选项的对象。其中，data 选项必须是一个函数而不能是一个对象。

继承而来的子组件销正中会拥有其父组件的一切属性和方法。2、extends

类型：Object | Function

详细：

允许声明扩展另一个组件 (可以是一个简单的选项对象或亏山构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。

Vue核心知识-Vue的组件之组件的继承

Vue.extend( options )

参数：

{Object} options

用法：

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

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

下例中，

component2 继承 component，再将 component2 在 vue 实例中注册使用。

观察 mounted 执行先后，发现控制台一次显示：

comp mounted

comp2 mounted

instance mounted

说明组件的执行顺序也是如此。

有一个功能完善的公用组件，当需槐念烂要对组件进行扩展时，会用到 extend，而不需要重新写一个组件。

关于vueextends和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。