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

Question

我正在将我的代码从模板文件更改为渲染函数。现在我有了这个 HTML：

:open.sync="state"

但我不知道如何将其翻译成 JavaScript。如何将其写入 createElement 函数？

Answer 1

截至 2021 年 3 月 && 来自 @acdcjunior 的灵感，我想出了这个解决方案：

// From Parent 
<custom-input
  :open.sync="formData.groupName"
/>

// CHILD
<div class="wrapper">
      <input
        type="text"
        class="full-width"
        :value="open" @input="$emit('update:open', $event)"
      />
</div>

顺便说一句：他的解决方案不起作用，因为 $event.target.value 未定义。

Answer 2

记住

: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>