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;
    }
  }
})

演示：

＆＃13;

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;
            }
          }
        })
      ])
    );
  }
})

＆＃13;

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

＆＃13;

Answer 2

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 未定义，他的解决方案不起作用。

如何在javascript中编写vue .sync

2 个答案: