利用VUE异步组件、动态加载组件，实现自定义组件顺序、动态绑定传入子组件的props、动态绑定监听子

marser 发布于2019-08-26 10:30 / 2962人阅读

摘要：发现了动态组件异步组件这个东西简直是救命啊动态组件异步组件思路分析有了动态组件这个东西之后，我们就可以根据绑定不同的值来渲染不同的组件。每个组件要传给子组件的值和接收子组件的事件也可以动态的绑定上去。

推动我实现这个功能的业务背景

最近接到一个让我很头疼的需求：产品要求我们系统页面上所有的模块都支持顺序的变动。
比如有模块A、B、C、D，可以无序的展示在页面上，我刚听到这个需求的时候我是崩溃的，如果是在项目开发之前提出这个需求，那么我的前期页面的架构肯定不会直接写死的。现在，如果想满足这个需求，我只能翻掉之前的页面重新开发.....
目前项目是有八个模块，我是每个模块封装一个多带带的组件，然后再index页面统一引入。

救命稻草

浏览了一番vue的官网，还是有所收获的。发现了动态组件 & 异步组件这个东西！！！简直是救命啊！！！

动态组件：

异步组件：

思路分析

有了动态组件这个东西之后，我们就可以根据:is绑定不同的值来渲染不同的组件。比如，拿到后台给我们返回的要渲染组件顺序的数组，我们通过循环数组，构建出一个最终我们想要的数据格式。关键点在于动态修改 () => import("")里面的值。每个组件要传给子组件的值和接收子组件emit的事件也可以动态的绑定上去。好了，废话不多说了，贴代码吧！

代码

首先是HTML层：

js层：

2.FixStatus组件：

3.ServiceStatus组件：

接口返回的数据：

{"code":"0000","msg":"请求成功！","data":[{"id":0,"tempName":"ServiceStatus","options":""""},{"id":1,"tempName":"Volume","options":""""},{"id":2,"tempName":"FixStatus","options":""""}]}

data的数组就是我们可以自定义顺序的数组。好了，是不是可以随意的玩起来了！下面看一下demo页面效果吧。

五百万项目的效果

可以看到：页面组件的排列顺序就是根据接口返回的顺序排列的、每个子组件props得到的值也是可以的、控制台console是我点击不同组件，emit给父组件的值。
这是我目前想到最妥当的方案，如果有巨佬有更好的思路，欢迎指导！扣扣 602353272。
溜了溜了....

云服务器 GPU云服务器 vuejs动态组件父子组件-动态渲染动态添加组件微信子组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106290.html

Vue_Vue权威指南

摘要：效率不高，很多多余，称之为脏检查。通过索引设置数组元素并触发视图更新。解决闪烁问题自定义指令自定义指令提供一种机制将数据的变化映射为行为。 Vue特性 Vue只是聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue通过简单 API提供高效的数据绑定和灵活的组件系统轻量数据绑定指令插件化架构从传统后台MVC 向REST API + 前端MV*迁移DOM是数据的一种自然映...

SimonMa 2019-08-21 14:31 评论0 收藏0
Vue面试中，经常会被问到的面试题/知识点(2019改进版)

摘要：在第一版的基础上进行了优化，新增一些面试题知识点，对一些知识点进行更加深入的描述。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。改变中的状态的唯一途径就是显式地提交。这两个可以在不进行刷新的情况下，操作浏览器的历史纪录。在第一版的基础上进行了优化，新增一些面试题/知识点，对一些知识点进行更加深入的描述。一、对于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 评论0 收藏0
vue組件自学

摘要：在较高层面上，组件是自定义元素，的编译器为它添加特殊功能。这时可以把特性直接添加到组件上不需要事先定义添加属性之后，它会被自动添加到的根元素上。下面是一个例子在本例中，子组件已经和它外部完全解耦了。 Vue组件什么是组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的...

iKcamp 2019-08-01 17:59 评论0 收藏0
VUE2.0学习笔记

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。如果需要条件渲染多个元素，可以使用包裹。 1.前言安装直接用引入（本地或者cdn） npm npm install vue vue-cli官方脚手架 # 全局安装 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 评论0 收藏0
Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0