Vue与原生JS动态生成自定义组件示例及原理
97 浏览量
更新于2024-08-31
收藏 65KB PDF 举报
本文档探讨了如何在Vue框架中结合原生JavaScript实现自定义组件的动态生成，以便在不预先确定挂载点的情况下创建多个组件实例。在传统的前端开发中，使用Vue、Angular或React等数据驱动框架时，开发者通常需要预先定义组件的挂载位置，如HTML元素标签。然而，如果试图通过动态方式生成这些组件，比如在页面加载后根据数据变化动态添加，可能会遇到DOM操作问题，例如`Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'`这样的错误。
造成这个问题的原因是，浏览器只允许对符合W3C标准的元素执行DOM操作，动态生成的自定义组件如果没有被正确地注册为浏览器可识别的自定义元素，就会引发此类错误。为了解决这个问题，文章建议修改`HTMLElement.prototype`的原型，并且实现自定义元素的注册，使得动态生成的组件能够在浏览器中得到支持。
尽管数据驱动框架的核心目标是减少DOM操作，但在实际应用中，尤其是动态组件生成的情况下，某些DOM操作可能是不可避免的。作者给出的一个示例代码片段展示了如何使用Vue和原生JavaScript创建一个名为`fuhao-com`的自定义组件，并将其动态添加到页面上的`#main`区域：
```html
<!DOCTYPE html>
<html>
<head>
...
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="mui-content">
<!-- 这里原本可能预留的挂载点 -->
</div>
<script src="js/fuhao-com" type="text/javascript"></script>
<script>
// 动态生成自定义组件
Vue.component('fuhao-com', {
template: '<div class="fuhao-component">Hello, Fuhao!</div>',
mounted() {
// 避免直接使用innerHTML，这里需要确保元素是合法的Node类型
let parent = document.getElementById('main');
if (parent && parent.nodeType === Node.ELEMENT_NODE) {
let component = this.$mount();
parent.appendChild(component.$el);
}
}
});
// 在适当的时候，根据数据动态创建和添加组件
// 示例：data里有一个数组，每个元素对应一个组件实例
let data = [
{name: 'Component 1'},
{name: 'Component 2'}
];
data.forEach(item => {
new Vue({
el: '#main',
components: {'fuhao-com': {}},
data: {item}
});
});
</script>
</body>
</html>
```
总结来说，这篇文章介绍了如何利用Vue框架与原生JavaScript的交互，在动态场景下实现自定义组件的生成，关键在于正确处理组件的挂载和注册，以及在必要时进行符合W3C标准的DOM操作。通过以上方法，开发者可以在保持数据驱动的优势的同时，灵活地处理组件的动态生成和管理。
Vue结合原生结合原生js实现自定义组件自动生成示例实现自定义组件自动生成示例
主要介绍了Vue结合原生js实现自定义组件自动生成示例,小编觉得挺不错的，现在分享给大家，也给大家做个参
考。一起跟随小编过来看看吧
就目前三大前端主流数据驱动框架（vue,ng,react）而言，均具有创建自定义组件的api，但都是必须先做到事先写好挂载点，
这个挂载点可以是原有静态元素标签也可以是自定义模板；对于多种组件通过同一数据流生成的，如果事先在页面上写好挂载
点(mounted)，然后通过dom操作去动态添加，会遇到类似这样一条错误提示信息：Failed to execute 'appendChild' on
'Node': parameter 1 is not of type 'Node'.(…)。这又是为何呢，下一步该怎么办？
原因是任何dom操作的对象必须是符合W3C标准的元素，除非如下所述的，改写生成html元素对象的原型
（HTMLElement.prototype）并注册自定义元素，从而实现动态生成自定义组件的效果。
不过，大家都明白使用数据驱动框架的初衷就是尽可能避免dom操作，而如下代码中还是有一些dom操作的，就目前认知水平
而言，感觉这些必要的dom操作还是避免不了的。其它不多说了，直接看代码。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html,charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/mui.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="mui-content">
</div>
</body>
<script src="js/fuhao-components.js" type="text/javascript"></script>
<script>
var jsonData = [
{
"keyname": "姓名鄂然失色而热重重中之重重中之重杂志的热热",
"type": "text",
"key": "name11"
}, {
"value": "姓名鄂之重杂志的热热",
"key": "name11"
}, {
"keyname": "姓名鄂然失色而热热热热是重中之重重中之重重中之重杂志的热热",
},
{
"keyname": "姓名鄂然失色而热热热热是重中之重重中之重重中之重杂志的热热",
"type": "textarea",
"key": "name"
},
{
"keyname": "性别",
"type": "radio",
"key": "sex",
"values": [
{
"key": "man",
"value": "男辅导班"
},
{
"key": "women",
"value": "女"
}
]
},
{
"keyname": "复选",
"type": "checkbox",
"key": "checkbox",
"values": [
{
"key": "man",
"value": "男"
},
{
"key": "women",
下载后可阅读完整内容，剩余3页未读，立即下载
2021-05-25 上传
2021-01-07 上传
点击了解资源详情
2020-10-15 上传
2022-06-25 上传
点击了解资源详情
2020-10-16 上传
2020-08-31 上传
weixin_38622983
- 粉丝: 5
- 资源: 959
我的内容管理
展开
最新资源
- JHU荣誉单变量微积分课程教案介绍
- Naruto爱好者必备CLI测试应用
- Android应用显示Ignaz-Taschner-Gymnasium取消课程概览
- ASP学生信息档案管理系统毕业设计及完整源码
- Java商城源码解析：酒店管理系统快速开发指南
- 构建可解析文本框：.NET 3.5中实现文本解析与验证
- Java语言打造任天堂红白机模拟器—nes4j解析
- 基于Hadoop和Hive的网络流量分析工具介绍
- Unity实现帝国象棋：从游戏到复刻
- WordPress文档嵌入插件：无需浏览器插件即可上传和显示文档
- Android开源项目精选：优秀项目篇
- 黑色设计商务酷站模板 - 网站构建新选择
- Rollup插件去除JS文件横幅：横扫许可证头
- AngularDart中Hammock服务的使用与REST API集成
- 开源AVR编程器：高效、低成本的微控制器编程解决方案
- Anya Keller 图片组合的开发部署记录
