這篇文章帶給大家的內容是關於Vue元件內部實作一個雙向資料綁定的程式碼範例,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
想法:父元件透過props傳值給子元件,子元件透過$emit 來通知父元件修改對應的props值,具體實作如下:
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' } } })
【相關推薦:JavaScript影片教學】
以上是Vue元件內部實作一個雙向資料綁定的程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!