VUE中如何构建js调用的全局组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE中如何构建js调用的全局组件相关的知识，希望对你有一定的参考价值。
参考技术A Vue 可以通过全局注册来实现全局组件的功能，比如有这么一个组件 exampleComponent ，如果想把它注册成全局组件的话，只需要在引入 Vue 的文件里调用 Vue.component(\'example-component\',exampleComponent) 来实现，又或者如同大部分 Vue 的 ui框架 那样，直接调用 Vue.use(/* 组件 */) 来实现。
Vue.use() 方法比 Vue.component() 要复杂些，其大致用法如下：
这两种全局注册组件的方法在注册成功后都是通过使用标签名如 <example-component></example-component> 来使用的。使用过 element 、 iview 等UI框架的朋友肯定会注意到这么一种比较特殊的组件，如 loading 和 message ，这类组件的使用场景大部分是在js执行环境时要用到，比如请求发送前要出现一个 loading 遮罩层防止用户重复请求，请求成功后这个遮罩层又要消失掉。这种需求若是也用预先在 html 中放置对应组件标签的形式的话，未免显得太过麻烦。所以，为了解决这个问题，有这么一种通过调用 Vue 原型方法来调用组件的方式。如 element 中 this.$message(\'这是一条消息提示\'); 这样调用后在页面上显示一条消息提示的js方法。
不管什么组件，其本质都是操作DOM，只不过因为直接原生操作 DOM 会对浏览器的开销比较大， Vue 里面使用了一种虚拟dom的技术来尽可能的减少这种开销，而且操作dom虽然是一种很直观的改变显示效果的形式，但操作太过于繁琐。种种原因， Vue 的基本思想就是 数据驱动DOM ，尽量不要去亲手修改 DOM 。但凡事无绝对，上面所说的就是一种不操作 DOM 就难以绕开的一种便捷功能的实现。
那如何实现全局js方法调用组件的功能呢？
要实现这个目的，必须先了解两个东西： vm.$mount 、 Vue.extend() 。
翻看官方文档，找出了这两者的用法如下：
上面两个东西，简单理解就是用 Vue 自身的方法定义一个 html 标签，然后又用 Vue 的方法找到某个特定id的标签，将其内容替换掉。
那么用这两个特性，我们来创建一个能够自定义入参内容的 fullName 组件，它的功能是调用时，页面出现一个半透明遮罩层，页面中间显示入参内容。
步骤如下：
Vue JS 组件中如何使用全局变量？
【中文标题】Vue JS 组件中如何使用全局变量？【英文标题】：How to use global variables in Vue JS components? 【发布时间】：2020-04-18 10:59:14 【问题描述】：我正在尝试使用 Vue JS 开发一个网络应用程序。单个文件组件（.vue 文件）是创建组件的好方法，但我不想使用任何节点模块。我找到了https://github.com/FranckFreiburger/http-vue-loader，它可以让我直接从我的 html/js 加载 .vue 文件。
我正在尝试将实时数据从 websocket 填充到组件内部的 html 表中。现在我想为多个组件使用相同的 websocket 数据。我创建了 websocket 和一个全局变量来存储组件外部的数据（即在 app.js 中）。现在我在我的组件中使用这个变量来进行实时数据更新。但是虽然我正在接收数据，但 html 表没有得到更新。
这个想法是创建一个 websocket 并将数据用于多个组件。
我实际上是 Vue 框架的新手，如果有任何理解问题，请见谅。
这是我的示例代码：
index.html
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div>
<comp1></comp1>
<comp1></comp1>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/httpVueLoader.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var global_data = [];
var ws = new WebSocket("ws://127.0.0.1:9012/ws");
ws.onmessage = msg =>
global_data = JSON.parse(msg.data);
console.log(global_data);
;
new Vue(
el: "#app",
components:
'comp1': httpVueLoader('js/component1.vue')
,
data:
);
component1.vue
<template>
<div>
<table id="tm_table" class="content-table">
<thead>
<th>Parameter</th>
<th>Value</th>
</thead>
<tbody>
<tr v-for="(parameter, id) in rt_data.params" :key="id">
<td>parameter.param</td>
<td>parameter.value</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
module.exports =
data()
return
rt_data: global_data,
;
;
</script>
<style>
</style>
高度赞赏解决此问题的任何帮助，甚至对任何不同方法的建议。谢谢。
【问题讨论】：
任何不使用vuex的方法？ 【参考方案1】：不使用 Vuex.. 您可以将全局变量保留在父组件中，然后将它们作为道具传递。或者，您可以将内容存储在浏览器的本地存储中，然后在需要时从组件中访问它们。这将作为一种设置全局变量的方式，现在已被广泛采用。
【讨论】：
以上是关于VUE中如何构建js调用的全局组件的主要内容，如果未能解决你的问题，请参考以下文章