Блог

Здравствуйте, я переношу Vue 2 на Vue 3, и у меня проблема с render функцией, потому render что в Vue 3 принимаются любые аргументы. Я читал, что вместо этого я могу использовать setup метод, но он не получает контекстный аргумент, содержащий data и children .

Вот мой старый код, который я хочу перенести:

  render(h, { children, props, data }) {
   if (props.item) {
      const { first, last } = props;
      const reorderingClasses = Object.entries({ first, last })
        .filter(filterFalsy)
        .map(([key, value]) => `${key}-${value}`)
        .join(' ');

      const { xs, sm, md, lg } = props;
      const sizeClasses = Object.entries({ xs, sm, md, lg })
        .filter(filterFalsy)
        .map(
          ([key, value]) => `col-${key}${value !== 'auto' ? `-${value}` : ''}`
        )
        .join(' ');

      return (
        <div {...mergeData(data, { class: [reorderingClasses, sizeClasses] })}>
          <div class="box">{children}</div>
        </div>
      );

  return children
}

 

Как я говорю в методе установки, у меня нет контекста, который содержит data и children .

Документы: https://v3.vuejs.org/guide/migration/functional-components.html

Большое вам спасибо.

Как вы сказали, вы могли бы использовать setup hook для визуализации шаблона (JSX), вы могли бы использовать slots.default вместо children и реактивный или ref вместо data :

 
setup(props, { slots }) {
   if (props.item) {
      const { first, last } = props;
      const reorderingClasses = Object.entries({ first, last })
        .filter(filterFalsy)
        .map(([key, value]) => `${key}-${value}`)
        .join(' ');

      const { xs, sm, md, lg } = props;
      const sizeClasses = Object.entries({ xs, sm, md, lg })
        .filter(filterFalsy)
        .map(
          ([key, value]) => `col-${key}${value !== 'auto' ? `-${value}` : ''}`
        )
        .join(' ');

      return ()=>(
        <div {...mergeData(data, { class: [reorderingClasses, sizeClasses] })}>
          <div class="box">{children}</div>
        </div>
      );
    }
  return ()=>slots.default()
}