Как написать Vue .Sync в JavaScript

Question

Я изменяю свой код из файла шаблона на функцию рендеринга. Теперь у меня есть этот HTML.

:open.sync="state"

Но я не знаю, как перевести это на javascript. Есть ли кто-нибудь, кто знает, как записать это в функцию createElement .

Заранее спасибо

Answer 1

Помните, что

:open.sync="state"

- это в основном синтаксический сахар для

:open="state" @update:open="state = $event"

Тогда эквивалент в функции рендеринга будет:

createElement('child', {
  props: {                                   // :open="state"
    "open": this.state
  },
  on: {                                      // @update:open="state = $event"
    "update:open": ($event) => {
      this.state = $event;
    }
  }
})

Демо-версия:

Vue.component('child', {
  template: '#child',
  props: ['open']
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  render(createElement) {
    return (
      createElement('div', [
        this.message,
        createElement('br'),
        createElement('child', {
          props: {
            "open": this.message
          },
          on: {
            "update:open": ($event) => {
              this.message = $event;
            }
          }
        })
      ])
    );
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <child :open.sync="message"></child>
</div>

<template id="child">
  <div>
    <input type="text" :value="open" @input="$emit('update:open', $event.target.value)">
    open: {{ open }}
  </div>
</template>