#vuejs2
Вопрос:
Я новичок в функции визуализации vuejs и сомневаюсь: может ли VNode быть повторно принят, например, VNode, вложенный в слот, перемещен в другой VNode, как в следующем случае (только для демонстрационных целей, не такой, как в этой версии):
Следующий код
lt;row cols="4,8"gt; lt;ui-text name="A" /gt; lt;ui-text name="B" /gt; lt;/rowgt; ожидается, что результат будет таким же, как:
lt;b-form-rowgt; lt;b-col cols="4"gt; lt;ui-text name="A" /gt; lt;/b-colgt; lt;b-col cols="8"gt; lt;ui-text name="B" /gt; lt;/b-colgt; lt;/b-form-rowgt; Это мой код, конечный результат не совсем такой, как ожидалось после проверки в представлении vuejs-devtools, но HTML-код аналогичен ожидаемому результату.
структура приведена в vuejs-в инструментах разработчика, вы можете найти 2 UiText узлы не ребенок BCol узлов соответственно и 2 BCol узлы отмечены как функциональные, и я не знаю, что такое «функциональной» это, я не уверен, как исправить это противоречие, мой код просто попробовать, чтобы позволить вновь созданных объектов vnode принимает существующую объектов vnode, я не уверен, если или $родитель UiText неизменна, это правильное решение?
export default { props: ['cols'], computed: { columns() { let v = this.cols; if (!v) return []; let values = this.cols.split(/,/g); return values; } }, render: function(h) { let columns = this.columns; let children = this.$slots.default ? this.$slots.default : new Array(); let kids = new Array(); for(let i = 0, s = Math.min(columns.length, children.length); i lt; s; i ) { let kid = children[i]; let node = h('b-col', {props: {cols: columns[i]}}, [ kid ]); kids.push(node); } return h('b-form-row', {}, kids); } } Ответ №1:
Я что-то неправильно понял, функциональный компонент просто так работает, так что проблем нет.
Это обновленная версия, она также является функциональным компонентом.
lt;scriptgt; export default { functional: true, props: ['cols'], render: function(h, ctx) { let columns = (ctx.props.cols || '').split(/,/g); let children = ctx.children || new Array(); let kids = new Array(); for(let i = 0, s = Math.min(columns.length, children.length); i lt; s; i ) { let node = h('b-col', {props: {cols: columns[i]}}, [ children[i] ]); kids.push(node); } return h('b-form-row', {}, kids); } } lt;/scriptgt;