vue自定義組件實(shí)現(xiàn)雙向綁定方式

更新時(shí)間：2025年04月24日 09:40:54 作者：six+seven

這篇文章主要介紹了vue自定義組件實(shí)現(xiàn)雙向綁定方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue自定義組件實(shí)現(xiàn)雙向綁定

在項(xiàng)目開(kāi)發(fā)中需要實(shí)現(xiàn)一個(gè)自定義組件，一個(gè)輸入框，可以在輸入框中輸入值檢索出值，也可以打開(kāi)彈窗去選擇。

效果如下圖

目標(biāo)

希望該組件可以通過(guò)v-model綁定變量，并實(shí)現(xiàn)雙向綁定

實(shí)現(xiàn)

 //父組件
<LazyBasedataModalTree
          v-model="assitone"
          title="彈窗標(biāo)題"
          :tableName="tableName"
   ></LazyBasedataModalTree>

data(){
   return{
           assitone:""
        }
}

//子組件
<template>
  <div class="loader">
     <input v-model="text" @on-change="handleChange"></input>
   </div>
</template>

<script>

export default {
  name: "lazyBasedataModalTree",
  model:{
    event:'update'
  },
  data(){
     return{
         assitone:""
     }
  },
  methods: {
    handleChange(){
        this.$emit('update', this.text)
     }
  },
};
</script>

<style scoped>

</style>

以上代碼即可實(shí)現(xiàn)雙向數(shù)據(jù)綁定，上述子組件的代碼只是提供示例，具體代碼需要根據(jù)需求去實(shí)現(xiàn)。

原理

實(shí)際v-model是由v-bind和on-change事件共同實(shí)現(xiàn)的，如下：

<LazyBasedataModalTree
          v-bind="assitone"
          @on-change="(val) => assitone = val"
          title="彈窗標(biāo)題"
          :tableName="tableName"
   ></LazyBasedataModalTree>
//或者
<LazyBasedataModalTree
          :value="assitone"
          @on-change="(val) => assitone = val"
          title="彈窗標(biāo)題"
          :tableName="tableName"
   ></LazyBasedataModalTree>

因此開(kāi)發(fā)自定義組件，可以自己實(shí)現(xiàn)on-change這一步，具體觸發(fā)事件，可以通過(guò)model屬性里面的event進(jìn)行設(shè)置。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3項(xiàng)目如何通過(guò)Nginx部署至服務(wù)器
這篇文章主要介紹了vue3項(xiàng)目通過(guò)Nginx部署至服務(wù)器的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-06-06
Vue的底層原理你了解多少
這篇文章主要為大家詳細(xì)介紹了Vue的底層原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
在 vue-cli v3.0 中使用 SCSS/SASS的方法
關(guān)于如何在 vue-cli v3.0 中使用 SCSS/SASS，這里提供三種方案。感興趣的朋友通過(guò)本文一起學(xué)習(xí)吧
2018-06-06
14個(gè)Vue中易被攻擊的代碼位置小結(jié)
在?Vue?框架中,哪些地方容易被攻擊呢？寫代碼的時(shí)候要注意什么呢？這篇文章中小編為大家總結(jié)了一些常見(jiàn)的容易受到攻擊的地方,希望對(duì)大家有所幫助
2024-02-02
vue 組件全局注冊(cè)和局部注冊(cè)的實(shí)現(xiàn)
下面小編就為大家分享一篇vue 組件全局注冊(cè)和局部注冊(cè)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
Vue 3 TypeScript 接口Interface使用示例詳解
Vue3中TypeScript的接口用于定義組件props、數(shù)據(jù)模型、事件等類型結(jié)構(gòu),提升代碼可讀性與維護(hù)性,常見(jiàn)場(chǎng)景包括props類型、響應(yīng)式數(shù)據(jù)、狀態(tài)對(duì)象、事件類型等,本文給大家介紹Vue 3 TypeScript接口Interface使用示例,感興趣的朋友一起看看吧
2025-07-07
利用vscode編寫vue的簡(jiǎn)單配置詳解
這篇文章主要給大家介紹了利用vscode編寫vue簡(jiǎn)單配置的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
2017-06-06
跟混亂的頁(yè)面彈窗說(shuō)再見(jiàn)
這篇文章主要介紹了跟混亂的頁(yè)面彈窗說(shuō)再見(jiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
詳解Vue與VueComponent的關(guān)系
這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
vue中使用v-for時(shí)為什么不能用index作為key
這篇文章主要介紹了vue中使用v-for時(shí)為什么不能用index作為key，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04