Vue - 简单实现一个命令式d窗组件

在日常工作中d窗组件是很常用的组件，但用得多还是别人的，空闲时间就自己来简单实现一个d窗组件

涉及知识点：extend、 el

使用方式：

indexvue ：组件布局、样式、交互逻辑

indexjs ：挂载组件、暴露方法

在此之前，了解下涉及的知识点

1 extend

使用这个api，可以将引入的vue组件变成vue构造函数，实例化后方便进行扩展

2 $mount

我们希望d窗组件是在使用时才显示出来，那么就需要动态的向body中添加元素。使用$mount方法可以手动挂载一个vue实例，和 extend 刚好搭配使用，这个也是d窗组件命令式的关键。

3 $el

既然要添加dom元素，通过实例的$el属性，正好可以取到dom元素，之后就是使用原生方法进行添加节点啦~

indexvue

indexjs

mainjs

上面我对外暴露的对象中含有install方法，这里可以使用Vueuse注册组件（使用Vueuse后，会查找install方法进行调用），将组件调用方法挂载到Vue原型上。

这个d窗组件比较简陋，还有很多地方可以完善

组件是Vuejs最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vuejs的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

下面一段简单的代码给大家介绍Vue加载组件的几种方式，具体代码如下所示：

//正常加载

import index from '/pages/indexvue'

import view from '/pages/viewvue'

//懒加载

const index = resolve => require(['/pages/indexvue'], resolve)

const view = resolve => require(['/pages/viewvue'], resolve)

//懒加载 - 按组

const index = r => requireensure([], () => r(require('/pages/indexvue')), 'group-index')

const view = r => requireensure([], () => r(require('/pages/viewvue')), 'group-view')

// 懒加载 - 按组 import，基于ES6 import的特性

const index = () => import('/pages/indexvue')

const view = () => import('/pages/viewvue')

补充：Vue动态加载组件的四种方式

动态加载组件的四种方式：

1、使用import导入组件，可以获取到组件

var name = 'system';

var myComponent =() => import('/components/' + name + 'vue');

var route={//前端全栈开发交流学习圈：866109386

  name:name,//帮助1-3年前端人员，提神技术思维

  component:myComponent

}

2、使用import导入组件，直接将组件赋值给componet

var name = 'system';

var route={//前端全栈开发交流学习圈：866109386

  name:name,//帮助1-3年前端人员，提神技术思维

  component :() => import('/components/' + name + 'vue');

}

3、使用require 导入组件，可以获取到组件

var name = 'system';

var myComponent = resolve => requireensure([], () => resolve(require('/components/' + name + 'vue')));

var route={//前端全栈开发交流学习圈：866109386

  name:name,//帮助1-3年前端人员，提神技术思维

  component:myComponent

}

当我们看到vue指令后面跟着一个值得时候，这里的值就不再是一个字符串了，它指的是一定是一个JS的表达式

1、v-for：可以理解为for in，遍历数组返回给item，数组有多少内容就有多少个item，并自动生成html标签

2、v-on：绑定事件，语法=>v-on：事件类型 = "函数(调用)"，调用的函数定义在methods中，vue会自动到里面寻找对应的函数去执行

3、v-model：数据的双向绑定，指定的数据需要在data里进行定义。当data里的该数据改变时，绑该数据的地方显示在页面的内容也会变化；当绑定的地方数据改变，data里的数据也会改变。其中一个改变另一个也会跟着改变。在methods里定义的函数中，使用 this数据 就可以访问到页面中该数据的内容

4、v-bind：把数据传到子组件：v-bind：变量名=“接收值”  然后在子组件里的props中接收变量值

5、v-text=“name”；表示让这个标签的innerText变成data数据里name的内容，不会复制HTML结构，单纯转成文字，效果和插值表达式一样

6、v-html=“name”；让这个标签的innerHTML变成data数据里name的内容，会把HTML结构也复制上

创建全局组件的方法 Vuecomponent（“todo-item”， ｛｝） =》 "todo-item"为标签名

var 组件名（=标签名） = ｛｝  并且需要在实例中的components中注册组件才能使用

v-bind:index="index" 可以简写 :index="index"

v-on:click="hdd" 可以简写 @click="hdd"

给子组件绑定多个数据时：

<todo-item :content="item" :index="index" v-for="(item, index) in list" @delete="hdd">

</todo-item>

子组件里的props使用数组的形式接收数据 ，子组件事件处理this$emit("delete",thisindex)，之后在向外触发父组件的事件并传入index参数，再使用splice方法实现点击列表的某一项时该项被删除。

生命周期函数就是vue实例在某一个时间点会自动执行的函数。

生命周期函数不放在methods里面，而是直接放在Vue实例里面

以上就是关于Vue - 简单实现一个命令式d窗组件全部的内容，包括:Vue - 简单实现一个命令式d窗组件、vue里面可以动态加载touchspin插件吗、Vue：基础语法、创建组件、组件间传值、实例生命周期等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！