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

            
        
    `,
      data () {
          return{}
      },
      methods: {
        handleInput (e) {
            this.$emit('input', e.target.value)
        }
    }
}

new Vue({
    components: {
        CompOne: component
      },
      el: '#root',
      template: `
        

          
        
      `,
  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!