Code example for implementing a two-way data binding inside a Vue component

The content of this article is about the code example of implementing a two-way data binding inside the Vue component. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Idea: The parent component passes the value to the child component through props, and the child component uses $emit to notify the parent component to modify the corresponding props value. The specific implementation is as follows:

import Vue from 'vue'
const component = {
    props: ['value'],
      template: `
        <div>
            <input type="text" @input="handleInput" :value="value">
        </div>
    `,
      data () {
          return{}
      },
      methods: {
        handleInput (e) {
            this.$emit('input', e.target.value)
        }
    }
}

new Vue({
    components: {
        CompOne: component
      },
      el: '#root',
      template: `
        <div>
          <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
        </div>
      `,
  data () {
    return{
        value: '123'
    }
  }
})

[Related recommendations: JavaScriptVideoTutorial】

The above is the detailed content of Code example for implementing a two-way data binding inside a Vue component. For more information, please follow other related articles on the PHP Chinese website!