Vue框架在项目开发中如何实现组件的复用？

本文共计1759个文字，预计阅读时间需要8分钟。

目录

一、使用场景

二、补充组件注册

三、深度解析Vue.extend()

Vue.extend() 是 Vue.js 中用于创建组件的函数。虽然你使用过很多次，但还没有深入思考过它的原理和应用。

一、使用场景

Vue.extend() 主要用于创建自定义组件。它允许你封装组件的逻辑和模板，以便在多个地方复用。

二、补充组件注册在使用 Vue.extend() 创建组件时，通常需要将其注册到 Vue 实例中。这可以通过以下方式完成：

javascriptconst MyComponent=Vue.extend({ // 组件选项});

Vue.component('my-component', MyComponent);

三、深度解析Vue.extend()Vue.extend() 接受一个对象，该对象包含了组件的配置。以下是该对象中的一些关键属性：

- `template`：组件的 HTML 模板。- `data`：组件的响应式数据。- `methods`：组件的方法。- `computed`：组件的计算属性。- `watch`：组件的观察者。

Vue.extend() 实际上是创建了一个新的 Vue 构造函数，它继承自 Vue 构造函数。这意味着你可以在这个构造函数中添加自定义选项，然后在组件中使用它们。

javascriptconst MyComponent=Vue.extend({ template: '{{ message }}', data: function () { return { message: 'Hello, Vue!' }; }});

在这个例子中，`MyComponent` 是一个自定义组件，它有一个模板和一个数据对象。当你在 Vue 实例中使用这个组件时，它将渲染一个包含 Hello, Vue! 文本的 `` 元素。

总结：虽然 Vue.extend() 是一个强大的工具，但使用它时要注意以下几点：- 确保你的组件选项是有效的。- 了解组件的继承关系，以避免潜在的问题。- 在使用 Vue.extend() 时，保持代码的可读性和可维护性。

目录

• 一、使用场景
• 二、补充组件注册
• 三、深度解析

Vue.extend()虽然已近用过很多次了，但都没有深入思考过这个东西，仔细想了想，有点意思

一、使用场景

按需使用组件，也叫懒加载，性能蹭蹭往上走

扩展的组件，其自由度高到你无法想象

二、补充组件注册

平日里，我们使用组件：

黄金玩家：

<template> <A/> </template> import A from "./A.vue"; export default { components: { A }, }

铂金玩家

import Vue from "vue" import A from "./A" Vue.component("A", A)

钻石玩家

import Vue from "vue"; // 检索目录下的模块 const req = require.context(".", true, /\.vue$/); req.keys().forEach(fileName => { // require模块 const componentConfig = req(fileName); const name = fileName.name || fileName.replace(/^\.\/(.*\/)?/, "").replace(/\.vue$/, ""); Vue.component(name, componentConfig.default || componentConfig); });

王者玩家

不必多说，今日主角！闪亮登场！

// 创建一个构造器 const Constructor = Vue.extend(test); // 利用构造函数创建实例 //创建过程中可 向组件中传入数据 const instance = new Constructor({ propsData:{ age:'23' } }); // instance.age = 29 // 挂载到某个dom上 instance.$mount(this.$refs.container)

三、深度解析

聊聊天

为什么我会对其赞不绝口，我收了钱吗？也有可能。

回归正题，开始聊这个之前先提一下vue的工作机制，尤其是cli的打包运作。在项目完成后，执行命令打包，只会将项目里用到的 .vue、.js、.css、.json、.svg等等文件进行打包，所以如果你是从老项目迁移开发，原本几百兆的文件夹，打包后可能只有十几二十兆，当然这需要你的懒加载做的比较好。

上面说的还是有点抽象，说点我们能感知到的。假设你写了下面这么一个组件test.vue，但是你脑子转太快了，以至于手速都跟不上，所以，你犯错了，age没定义你就使用了，那势必会报错对吧？其实并不会，你不导入，不使用它，一点事情没有，它只会在那错下去孤独终老。

<template> <div class="container"> 我是扩展，挂接外面的div的组件啦 <div>{{ age }}</div> </div> </template> <script> export default { data() { return {}; } };

但是你只要一导入，使用，立马报错：

再次回到刚刚那个点：你不引入它，就不会报错。那按需引入，使用到才引入，有没有一种办法，我使用的时候再传age给test组件呢？岂不是美哉？Vue.extend()就可以完美做到！

再浅谈一下Vue.extend()是个啥

他也不是什么特别高大上的东西，官方说是个继承构造器，讲人话就是构造函数。通过构造函数可以实例化对象，这个构造函数很特殊，他是Vue构造函数的子构造函数，继承与Vue的Constructor()，所以理所当然的，他的参数就与Vue的参数一样：

上个例子瞧瞧

子组件声明props接收

<template> <div class="container">我是扩展，挂接外外面的div的组件啦 <div>{{age}}</div> </div> </template> <script> export default { props: { age: { type: String, default: "" } } };

父组件用extend控制实例化这个对象并挂载到对应DOM上，可以使用propData进行传值

<template> <div ref="container" class="container"> </div> </template> <script> import Vue from "vue"; import test from "./components/Vue.extend/test"; export default { mounted() { // 创建一个构造器 const Constructor = Vue.extend(test); // 利用构造函数创建实例 //创建过程中可 向组件中传入数据 const instance = new Constructor({ propsData:{ age:'23' } }); // 挂载到某个dom上 instance.$mount(this.$refs.container) }, methods: {} }; </script>

亮点是什么呢？这里的test组件的prop可以直接去掉：

<template> <div class="container">我是扩展，挂接外外面的div的组件啦 <div>{{age}}</div> </div> </template>

父组件中以实例属性形式网上挂接数据，自由度真的太高了！！！这样运用起来，可以封装出意想不到的组件库。现在主流UI库的很多巧妙逻辑都是使用了，Vue.extend(),只不过是搭配上函数对懒加载进行控制

<template> <div ref="container" class="container"> </div> </template> <script> import Vue from "vue"; import test from "./components/Vue.extend/test"; export default { mounted() { // 创建一个构造器 const Constructor = Vue.extend(test); // 利用构造函数创建实例 //创建过程中可 向组件中传入数据 const instance = new Constructor(); //可以直接以属性方式挂接到实例上 instance.age = 29 // 挂载到某个dom上 instance.$mount(this.$refs.container) }, }; </script>

到此这篇关于Vue extend使用示例深入分析的文章就介绍到这了,更多相关Vue extend内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！