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

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

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

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

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

效果如下圖

目標

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

實現(xiàn)

 //父組件
<LazyBasedataModalTree
          v-model="assitone"
          title="彈窗標題"
          :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>

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

原理

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

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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