使用另一个页面创建Vue组件

时间:2019-05-26 21:12:05

标签: javascript vue.js vuejs2 vue-component

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

localhost / 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和

进行相同操作。

localhost / homepage

<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>

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

1 个答案:

答案 0 :(得分:2)

在Vue中,就像在大多数SPA中一样,页面(DOM)不保存数据。
该页面是一个渲染工具,可显示源中保存的数据。来源可以是:

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

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


因此,简而言之,您不会将包含#id的div从一页转移到另一页。您只需对商店进行突变,然后在所有使用数据的地方进行更新。

相关问题
最新问题