createElement 렌더 기능을 사용하여 javascript에서 vue.sync를 쓰는 방법

createElement 렌더 기능을 사용하여 javascript에서 vue.sync를 쓰는 방법

템플릿 파일에서 렌더 기능으로 코드를 변경합니다.다음 HTML을 사용할 수 있게 되었습니다.

:open.sync="state"

그런데 이걸 자바스크립트로 어떻게 번역해야 할지 모르겠어요.함수에는 어떻게 쓰는 거죠?

그 것을 기억하라.

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

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>

BTW: 그 이후로 그의 솔루션은 작동하지 않았다.$event.target.value정의되지 않았습니다.

언급URL : https://stackoverflow.com/questions/50041991/how-to-write-vue-sync-in-javascript-using-createelement-render-function