У меня есть функция JavaScript, которая возвращает узел DOM, представляющий древовидное представление с множеством вложенных узлов внутри него, я хотел бы знать, можно ли передать эту функцию в функцию рендеринга vue ??
Я знаю, что мне не следует возиться с DOM или, может быть, вместо этого использовать рекурсивный шаблон, но ради обучения и проверки себя я все равно хотел бы понять это ... как управлять DOM внутри Vue с помощью функций рендеринга.
Спасибо за любую помощь.
Я не знаю ни одного механизма для этого (по крайней мере, официально). Функция рендеринга - не место, где можно каким-либо образом манипулировать DOM.
Вы по-прежнему можете осторожно манипулировать DOM вне функции рендеринга, не слишком беспокоя Vue. Если у вас есть пустой заполнитель <div> в вашем шаблоне с ref, тогда добавление дочернего элемента к нему должно быть нормальным, пока элемент DOM остается на месте (использование v-if в div может мешать, но я не уверен на 100% этого). Vue обычно хорошо справляется с повторным использованием одного и того же элемента DOM при повторном рендеринге - но в том-то и дело, что вы возитесь с DOM, над которым Vue думает, что он имеет полный контроль, и вам не гарантируется, что Vue будет сотрудничать с любыми внешними изменения в DOM, которых он не ожидал.
Подумав об этом немного подробнее, вы можете добиться желаемого с помощью настраиваемой директивы или компонента Vue. Что-то вроде этого:
Vue.directive('el', {
bind(el, binding) {
if (binding.value) {
el.appendChild(binding.value)
}
},
update(el, binding) {
// Check if bound element changed
if (binding.oldValue !== binding.newValue) {
if (binding.oldValue) {
// Remove old element
binding.oldValue.remove()
}
if (binding.value) {
// Append new element
el.appendChild(binding.value)
}
}
}
})
// Create a DOM element manually
const btn = document.createElement('button')
btn.textContent = 'Click'
new Vue({
el: '#app',
render(h) {
return h('div', {
directives: [
{
name: 'el',
value: btn
}
]
})
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
domProps: { innerHTML: this.createTreeView() }Простой текст работает, но не функция, возвращающая узел. Спасибо за ваше время. 14.01.2020