VueJs操纵联模板，并对其进行重新初始化

Question

这个问题类似于VueJS re-compile HTML in an inline-template component同时也How to make Vue js directive working in an appended html element

不幸的是在这个问题的解决不能再对当前VueJS执行情况$compile使用已被删除。

我的使用情况如下：

我不得不使用它操作的页面，之后触发一个事件的第三方代码。现在事件被解雇后，我想让VueJS知道它应该重新初始化当前的DOM。

（这是写在纯JavaScript第三方允许用户将新的小部件添加到页面）

https://jsfiddle.net/5y8c0u2k/

HTML

<div id="app"> 
    <my-input inline-template> 
    <div class="wrapper"> 
    My inline template<br> 
    <input v-model="value"> 
    <my-element inline-template :value="value"> 
    <button v-text="value" @click="click"></button> 
    </my-element> 
    </div> 
    </my-input> 
</div> 

使用Javascript - VueJS 2.2

Vue.component('my-input', { 
    data() { 
     return { 
      value: 1000 
     }; 
    } 
}); 

Vue.component('my-element', { 
    props: { 
     value: String 
    }, 
    methods: { 
     click() { 
      console.log('Clicked the button'); 
     } 
    } 
}); 

new Vue({ 
    el: '#app', 
}); 

// Pseudo code 
setInterval(() => { 
    // Third party library adds html: 
    var newContent = document.createElement('div'); 
    newContent.innerHTML = `<my-element inline-template :value="value"> 
    <button v-text="value" @click="click"></button> 
    </my-element>`; document.querySelector('.wrapper').appendChild(newContent) 

    //  
    // How would I now reinialize the app or 
    // the wrapping component to use the click handler and value? 
    // 

}, 5000) 

Answer 1

经过进一步调查，我接触到了VueJs te我并得到了feedback，下列方法可能是一个有效的解决方案：

/** 
* Content change handler 
*/ 
function handleContentChange() { 
    const inlineTemplates = document.querySelector('[inline-template]'); 
    for (var inlineTemplate of inlineTemplates) { 
    processNewElement(inlineTemplate); 
    } 
} 


/** 
* Tell vue to initialize a new element 
*/ 
function processNewElement(element) { 
    const vue = getClosestVueInstance(element); 
    new Vue({ 
    el: element, 
    data: vue.$data 
    }); 
} 

/** 
* Returns the __vue__ instance of the next element up the dom tree 
*/ 
function getClosestVueInstance(element) { 
    if (element) { 
    return element.__vue__ || getClosestVueInstance(element.parentElement); 
    } 
} 

你可以试试下面的fiddle

Answer 2

一般来说，当我听到这样的问题，他们似乎总是用解决一些Vue的更亲密和模糊的内在美:)

我已经使用了相当多的第三方库，'坚持拥有数据'，他们用来修改DOM - 但如果你可以使用这些事件，你可以将更改代理给Vue拥有的对象 - 或者，如果您不能拥有vue拥有的对象，则可以通过计算属性观察独立的数据结构。

window.someObjectINeedtoObserve = {...} 

yourLib.on('someEvent', (data) => { 
    // affect someObjectINeedtoObserve... 
}) 

new Vue ({ 
    // ... 
    computed: { 
    myObject() { 
     // object now observed and bound and the dom will react to changes 
     return window.someObjectINeedtoObserve 
    } 
    } 
}) 

如果您可以澄清用例和库，我们可以帮助更多。