Vue組件內(nèi)部如何實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定

小編給大家分享一下Vue組件內(nèi)部如何實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

思路：父組件通過(guò)props傳值給子組件，子組件通過(guò) $emit 來(lái)通知父組件修改相應(yīng)的props值，具體實(shí)現(xiàn)如下：

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

看完了這篇文章，相信你對(duì)Vue組件內(nèi)部如何實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！