快捷導(dǎo)航

Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)

更新時(shí)間：2022年11月14日 14:41:08 作者：shijialeya.

本文給大家分享Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式，方式一是通過(guò)監(jiān)聽(tīng)事件實(shí)現(xiàn)方式二是通過(guò) v-model 實(shí)現(xiàn)，每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

方式一：通過(guò)監(jiān)聽(tīng)事件實(shí)現(xiàn)

父組件將數(shù)據(jù)傳遞給子組件通過(guò) props 實(shí)現(xiàn)；而子組件將數(shù)據(jù)傳遞給父組件通過(guò)事件來(lái)實(shí)現(xiàn)，在子組件中定義一個(gè)事件，在該事件中傳遞值，由父組件中監(jiān)聽(tīng)這個(gè)事件。通過(guò)這種方式實(shí)現(xiàn)父子組件雙向綁定的效果最常見(jiàn)。

子組件案例代碼：

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇" @change="change">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'sonTest',
    // props 下定義父組件傳遞給子組件的數(shù)據(jù)
    props: {
      // 父組件使用子組件時(shí)通過(guò) :options 傳遞給子組件
      options: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        value: ''
      }
    },
    methods: {
      change() {
        console.log('子組件下拉框值發(fā)生改變：', this.value)
        // 當(dāng)下拉框中選定的值發(fā)生改變后，通過(guò) $emit 回調(diào) update 事件，并將修改后的值返回給父組件
        this.$emit('update', this.value) // 觸發(fā)父組件的 @update 事件
        // 父組件使用子組件時(shí)通過(guò) @update 指定回調(diào)的處理方法
      }
    }
  }
</script>

<style scoped>

</style>

父組件案例代碼：

<template>
	<son-test :options="options" @update="update"></son-test>
</template>

<script>
  import SonTest from './sonTest'
  export default {
    name: 'fatherTest',
    components: { SonTest },
    data() {
      return {
       	value: '',
        options: [
          { value: '選項(xiàng)1', label: '黃金糕' },
          { value: '選項(xiàng)2', label: '雙皮奶' },
          { value: '選項(xiàng)3', label: '蚵仔煎' },
          { value: '選項(xiàng)4', label: '龍須面' },
          { value: '選項(xiàng)5', label: '北京烤鴨' }
        ],
      }
    },
    methods: {
      update(newValue) {
        // 與 value 實(shí)現(xiàn)雙向綁定效果
        this.value = newValue
        console.log('子組件通過(guò)事件傳遞過(guò)來(lái)的值：', newValue)
      },
    }
  }
</script>
 
<style scoped>

</style>

優(yōu)點(diǎn)：可以實(shí)現(xiàn)父子組件多個(gè)值的雙向綁定效果。

缺點(diǎn)：父組件需要編寫(xiě)監(jiān)聽(tīng)子組件事件的代碼。

方式二：通過(guò) v-model 實(shí)現(xiàn)

在子組件中指定 model 變量，父組件中通過(guò) v-model 指令來(lái)實(shí)現(xiàn)雙向綁定，通過(guò)這種方式父組件無(wú)需監(jiān)聽(tīng)子組件的事件。

子組件案例代碼：

<template>
  <el-select v-model="sonValue" placeholder="請(qǐng)選擇">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'sonTest',
    // props 下定義父組件傳遞給子組件的數(shù)據(jù)
    props: {
      // 父組件使用子組件時(shí)通過(guò) :options 傳遞給子組件
      options: {
        type: Array,
        default: []
      },
      value: {
        type: String,
        default: ''
      }
    },
    model: {
      // 需要雙向綁定的 props 變量名稱(chēng)，也就是父組件通過(guò) v-model 與子組件雙向綁定的變量
      prop: 'value',
      // 定義由 $emit 傳遞變量的名稱(chēng)
      event: 'newValue'
    },
    data() {
      return {
        // 子組件不能修改 props 下的變量，所以定義一個(gè)臨時(shí)變量
        sonValue: this.value
      }
    },
    watch: {
      // 監(jiān)聽(tīng) sonValue 臨時(shí)變量，如果臨時(shí)變量發(fā)生變化，那么通過(guò) $emit 將新的值傳遞給父組件
      sonValue(value) {
        console.log('子組件下拉框值發(fā)生改變：', this.sonValue)
        // 【注意】newValue x需要和 model.event 定義的值一致
        this.$emit('newValue', this.sonValue)
      }
    }
  }
</script>

<style scoped>

</style>

父組件案例代碼：

<template>
	<son-test :options="options" v-model="value"></son-test>
</template>

<script>
  import SonTest from './sonTest'
  export default {
    name: 'fatherTest',
    components: { SonTest },
    data() {
      return {
        value: '選項(xiàng)1',
        options: [
          { value: '選項(xiàng)1', label: '黃金糕' },
          { value: '選項(xiàng)2', label: '雙皮奶' },
          { value: '選項(xiàng)3', label: '蚵仔煎' },
          { value: '選項(xiàng)4', label: '龍須面' },
          { value: '選項(xiàng)5', label: '北京烤鴨' }
        ],
      }
    },
    watch:{
      // 下面這個(gè)監(jiān)聽(tīng)只是為了打印顯示
      value(newValue){
        console.log('value 值發(fā)生改變：', newValue)
      }
    }
  }
</script>
 
<style scoped>

</style>

優(yōu)點(diǎn)：父組件無(wú)需編寫(xiě)額外的代碼，直接通過(guò) v-model 實(shí)現(xiàn)雙向綁定。

缺點(diǎn)：這種方式只能雙向綁定一個(gè)值。

到此這篇關(guān)于Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)的文章就介紹到這了,更多相關(guān)vue父子組件數(shù)據(jù)雙向綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: