Javascript 如何将vue实例克隆到另一个dom节点

如何将vue应用程序克隆到另一个dom节点

我制作了一个简单的vue应用程序来解决我的问题，我尝试使用js

clone

函数进行克隆并重新初始化应用程序，它将挂载，但不会解决事件。这是我的密码：

const initMyApp=（el）=>{
返回新的Vue({
埃尔，
数据：{
信息：“嘿”
},
方法：{
sayHello:function（）{
this.message='HELLO！！！'+new Date（）.getmillizes（）
}
},
挂载：函数（）{
console.log（'mounted'）
}
})
}
initMyApp（“#app”）
函数moveApp（）{
var appNode=document.getElementById（“应用”）
var cloned=appNode.cloneNode（true）；
document.getElementById（“appContainer”）.innerHTML=''
document.getElementById（“appContainer”）.appendChild（克隆）；
initMyApp（“#appContainer”）
}

主要
你好
{{message}}

做
容器

如果要在不同的DOM元素上装载Vue应用程序，则应使用

mount（）

而不是

el

：

const initMyApp=（el）=>{
返回新的Vue({
数据：{
信息：“嘿”
},
方法：{
sayHello:function（）{
this.message='HELLO！！！'+new Date（）.getmillizes（）
}
},
挂载：函数（）{
console.log（'mounted'）
}
})
}
函数moveAppFirst（）{
const vue1=initMyApp（）
vue1.$mount（“#应用程序”）
}
函数moveAppSecond（）{
const vue2=initMyApp（）
vue2.$mount（“#appContainer”）
}

先做
主要
你好
{{message}}

做第二
容器
你好
{{message}}

如果要在不同的DOM元素上装载Vue应用程序，则应使用

mount（）

而不是

el

：

const initMyApp=（el）=>{
返回新的Vue({
数据：{
信息：“嘿”
},
方法：{
sayHello:function（）{
this.message='HELLO！！！'+new Date（）.getmillizes（）
}
},
挂载：函数（）{
console.log（'mounted'）
}
})
}
函数moveAppFirst（）{
const vue1=initMyApp（）
vue1.$mount（“#应用程序”）
}
函数moveAppSecond（）{
const vue2=initMyApp（）
vue2.$mount（“#appContainer”）
}

先做
主要
你好
{{message}}

做第二
容器
你好
{{message}}

将公共数据移动到vuex，然后在另一个节点上实例化第二个应用程序，这样它们就可以使用来自vuex的相同数据了吗？@coedycode实际上，我没有使用vuex。但是vue。这不是关于使用相同的数据，而是在另一个dom节点中克隆完全相同的应用程序为什么不能实例化完全相同的应用程序源代码的第二个副本？你希望通过克隆保留什么，而不是通过实例化第二个副本来实现？我可以使用纯js来实现这一点，而不必直接在html中实例化该应用程序吗？（我的主要问题是稍后将在应用程序中创建节点，因此我必须克隆该应用程序或在其中初始化它，因此我正在研究如何执行该操作）@coedycode抱歉，我现在明白你的意思了。我不确定是否可以在第一个应用程序中实例化第二个应用程序而不会出现问题，当您在html中使用这样的内联模板时就不可能了。如果要将主要功能和模板移动到vue组件，则可以根据需要启动任意数量的vue组件，包括嵌套组件或同级组件。i、 e.启动应用程序，然后将组件作为“主”挂载，然后在需要第二个组件时有条件地挂载。将公共数据移动到vuex，然后在另一个节点上实例化第二个应用程序，这样它们就可以使用来自vuex的相同数据了吗？@coedycode实际上，我没有使用vuex。但是vue。这不是关于使用相同的数据，而是在另一个dom节点中克隆完全相同的应用程序为什么不能实例化完全相同的应用程序源代码的第二个副本？你希望通过克隆保留什么，而不是通过实例化第二个副本来实现？我可以使用纯js来实现这一点，而不必直接在html中实例化该应用程序吗？（我的主要问题是稍后将在应用程序中创建节点，因此我必须克隆该应用程序或在其中初始化它，因此我正在研究如何执行该操作）@coedycode抱歉，我现在明白你的意思了。我不确定是否可以在第一个应用程序中实例化第二个应用程序而不会出现问题，当您在html中使用这样的内联模板时就不可能了。如果要将主要功能和模板移动到vue组件，则可以根据需要启动任意数量的vue组件，包括嵌套组件或同级组件。i、 e.启动应用程序，然后将组件作为“主”挂载，然后在需要第二个组件时有条件地挂载它。