javascript - 使用另一个页面创建一个 vue 组件

标签 javascript vue.js vuejs2 vue-component

如何使用 VueJs 将第 2 页的 div 加载到第 1 页。

本地主机/getnew

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content2"> this is content2</div>
<div id="content3"> this is content3</div>
</div>
</body>
</html>

我想从 getnew 中获取并使用 id content2,在点击并删除链接后,用该 div 的内容在主页中创建一个 div,然后依次对 content3、content4 和 content4 执行相同的操作。

本地主机/主页

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<a href="#"> get content</a>
</div>
</body>
</html>

然后就是这样了。

<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>

我是 VueJs 的新手,我不知道该怎么做。如果有人可以提供帮助。谢谢。

最佳答案

在 Vue 中,与大多数 SPA 一样,页面 (DOM) 不保存数据。
该页面是一种呈现工具,可显示源中保存的数据。来源可以是:

  • 本地数据,保存在 vm.data() 中(通常保存当前组件的特定数据 - 但它可以传递给子组件)
  • 全局数据,保存在用于保存数据和管理状态的专用模块中,通过计算(getter)传递给 vm。
    这个专用数据模块称为 Vuex .
    您与它交互调度操作,将突变提交给 Vuex状态。
    在任何页面上监听 Vuex 数据的任何组件都将在发生任何更改时自动更新,无论哪个组件触发了突变。

如果您的数据不是太复杂,您可以在没有 Vuex 的情况下使用 simple state management 来管理它。模式。


所以,简而言之,您不会从一个页面到另一个页面获得带有一些 #id 的 div。您只需改变商店,然后在任何使用数据的地方进行更新。

关于javascript - 使用另一个页面创建一个 vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56317390/

相关文章:

javascript - FabricJS 仅将函数应用于某些类型的对象

javascript - Nodejs 中的事件循环和浏览器中的事件循环之间的区别

vue.js - 单击 div 内的按钮时防止单击父项

javascript - 如何判断某个元素是否正在使用 jQuery 进行拖动?

javascript - Vue.js 无法向 $root 元素发出事件

javascript - 如何使用Vue.js将数据插入本地存储?

javascript - 自动滚动div问题

属性内的 Vue.js 原始 HTML

javascript - VueRouter 在业力单元测试中未定义

javascript - AppendChild 链接与 onClick 功能