javascript - 如何使用 createElement 渲染函数在 javascript 中编写 vue.sync

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>