Блог

Главная - Вопросы по программированию - Использовать Vue.js 3 фрагмента с функцией рендеринга

Использовать Vue.js 3 фрагмента с функцией рендеринга

#javascript #vue.js #vue-component #vuejs3

#javascript #vue.js #vue-компонент #vuejs3

Вопрос:

Как я должен использовать фрагменты Vue 3 с функциями рендеринга? разве следующий код не должен работать?

 import { h } from 'vue'

render () {
  return [
    h('label', { htmlFor: 'username' }, this.label),
    h('input', { id: 'username' }),
  ]
},

Ответ №1:

Да, этот синтаксис правильный для определения фрагментов в функциях рендеринга :

 import { h } from "vue";
export default {
  props: ["label", "errors"],

  render() {
    return [
      h("label", { htmlFor: "username" }, this.label),
      h("input", { id: "username" }),
      this.errors amp;amp; h("span", { class: "red" }, this.errors)
    ];
  }
};

это эквивалентно :

 <template>
 <label for="username"> {{this.label}}</label>
  <input id="username" />
   <span class="red" v-if="errors">{{errors}}</span>
</template>

ЖИВАЯ ДЕМОНСТРАЦИЯ