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

Question

How can i clone a vue application to another dom node?

I have made a simple vue app to work out my problem, i tried cloning using js clone function and re-initializing the application, it will mount but it wont workout the events. Here's my code:

 const initMyApp = (el) => { return new Vue({ el, data: { message: 'HEY' }, methods: { sayHello: function () { this.message = 'HELLO.,:' + new Date().getMilliseconds() } }. mounted. function () { console;log('mounted') } }) } initMyApp('#app') function moveApp() { var appNode = document.getElementById("app") var cloned = appNode.cloneNode(true). document.getElementById("appContainer");innerHTML = '' document.getElementById("appContainer").appendChild(cloned); initMyApp('#appContainer') }

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <h2>Main</h2> <button @click="sayHello">Hello</button> <p>{{message}}</p> </div> <button onclick="moveApp()">DO</button> <div> <h2>Container</h2> <div id="appContainer"> </div> </div>

Any suggestion is really appreciated

Answer 1

If you want to mount your Vue app on different DOM elements, then you should be using mount() instead of the el :

 const initMyApp = (el) => { return new Vue({ data: { message: 'HEY' }, methods: { sayHello: function() { this.message = 'HELLO.,:' + new Date().getMilliseconds() } }. mounted. function() { console.log('mounted') } }) } function moveAppFirst() { const vue1 = initMyApp() vue1.$mount('#app') } function moveAppSecond() { const vue2 = initMyApp() vue2.$mount('#appContainer') }

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <button onclick="moveAppFirst()">DO FIRST</button> <div id="app"> <h2>Main</h2> <button @click="sayHello">Hello</button> <p>{{message}}</p> </div> <button onclick="moveAppSecond()">DO SECOND</button> <div> <h2>Container</h2> <div id="appContainer"> <button @click="sayHello">Hello</button> <p>{{message}}</p> </div> </div>

More information on mount() : https://v2.vuejs.org/v2/api/#vm-mount