Использование функции рендеринга в Vue

внешний интерфейс JavaScript Vue.js

функция рендеринга

Vue использует шаблон для создания вашего HTML. Однако в особых случаях этот жестко запрограммированный режим не может соответствовать требованиям, и должны требоваться возможности программирования js. На этом этапе вам нужно использовать рендеринг для создания HTML.

Когда использовать функцию рендеринга

При одновременной инкапсуляции набора универсальных компонентов кнопки кнопки имеют четыре стиля (по умолчанию ошибка успеха). Прежде всего, вы можете подумать о следующей реализации

  <div v-if="type === 'success'">success</div>
  <div v-else-if="type === 'error'">error</div>
  <div v-else-if="type === 'warm'">warm</div>
  <div v-else>default</div>

Это не проблема, когда есть несколько стилей кнопок, но представьте, что если требуется более десяти стилей кнопок, текст в кнопке зависит от реальной ситуации (например, текст в кнопке успеха может быть ОК, ХОРОШО, и т.д.). Тогда способ написания шаблона до смерти очень слаб. В такой ситуации можно сказать, что использование функции рендеринга является лучшим выбором.

Перепишите компонент кнопки в соответствии с реальной ситуацией

Прежде всего, содержимое, сгенерированное функцией рендеринга, эквивалентно содержимому шаблона, поэтому при использовании функции рендеринга тег шаблона необходимо сначала удалить из файла .vue. Остается только логический уровень.

export default {
  render(h) {
    return h('div',{
      'class': {
        btn: true,
        success: this.type === 'success',
        error: this.type === 'error',
        warm: this.type === 'warm',
        default: this.type === 'default'
      },
      domProps: {
        innerHTML: this.$slots.default[0].text
      },
      on: {
        click: this.clickHandle
      }
    })
  },
  methods: {
    clickHandle() {
      // dosomething
    }
  },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    text: {
      type: String,
      default: 'default'
    }
  }
};

Согласно компонентному мышлению, то, что можно абстрагировать, никогда не записывается в логике. Функция clickHandle здесь может запускать различную логику в зависимости от типа кнопки, поэтому я не буду описывать ее более подробно.

Затем вызовите родительский компонент

<btn
  v-for="(btn, index) in testData"
  :type="btn.type"
  :text="btn.text"
  :key="index">{{btn.text}}
</btn>

использовать jsx

Да, помните, что тип каждого параметра такой же, как и использование, слишком хлопотно передавать параметры по порядку. Затем вы можете использовать jsx для оптимизации этого утомительного процесса.

return (
  <div
    class={{
      btn: true,
      success: this.type === 'success',
      error: this.type === 'error',
      warm: this.type === 'warm',
      default: this.type === 'default'
    }}
    onClick={this.clickHandle}>
    {this.$slots.default[0].text}
  </div>
)
Категории