Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼
更新時(shí)間：2019年04月04日 11:02:37 作者：chenwenxian
這篇文章主要介紹了Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
思路：父組件通過props傳值給子組件，子組件通過 $emit 來通知父組件修改相應(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'
}
}
})
總結(jié)
以上所述是小編給大家介紹的Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右鍵彈出菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了vue封裝jquery修改自身及兄弟元素的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
下面小編就為大家分享一篇Vue2 模板template的四種寫法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue2.0實(shí)現(xiàn)1.0的搜索過濾器功能實(shí)例代碼
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)1.0的搜索過濾器功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
vue3點(diǎn)擊不同的菜單頁(yè)切換局部頁(yè)面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3點(diǎn)擊不同的菜單頁(yè)切換局部頁(yè)面實(shí)現(xiàn)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue實(shí)現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片加載完成前的loading組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能(示例詳解)
最近在開發(fā)工業(yè)品超市的后臺(tái)系統(tǒng),遇到一個(gè)需求,就是實(shí)現(xiàn)在一個(gè)table表格中多選數(shù)據(jù),在網(wǎng)上查了好多,有些方法真的是無語,下面通過本文給大家分享vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了Vue.js directive自定義指令詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vite構(gòu)建vue3項(xiàng)目的全過程記錄
vite是VUE3創(chuàng)建項(xiàng)目的工具,項(xiàng)目大了之后,性能明顯優(yōu)于webpack,下面這篇文章主要給大家介紹了關(guān)于vite構(gòu)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-01-01