vue父子組件之間傳值的方法

一、基本父子傳值

父傳子

方式：

props

效果：

把父組件的fatherName屬性傳入子組件，在子組件中使用

父組件代碼：

<template>
  <div>
    父組件：{{fatherName}}
    <SonVue :fatherName="fatherName"></SonVue>
  </div>
</template>

子組件代碼：

<template>
    <div>
        子組件：{{fatherName}}
    </div>
</template>

<script>
export default {
   props:['fatherName']
}
</script>

子傳父

方式：

$emit

效果：

在子組件觸發(fā)事件，修改父組件的fatherName屬性

父組件代碼：

父組件
<template>
  <div>
    父組件：{{fatherName}}
    <SonVue @sendChangeName="ChangeName"></SonVue>
  </div>
</template>
<script>
import SonVue from './components/Son.vue';
export default {
  data(){
    return {
      fatherName:'yj'
    }
  },
  methods:{
    ChangeName(v){
      this.fatherName = v
    }
  },
  components:{
    SonVue
  }
}
</script>

子組件代碼：

<template>
    <div>
        子組件：
        <button @click="ChangeName">修改父組件的fatherName</button>
    </div>
</template>

<script>
export default {
   methods: {
    ChangeName(){
        this.$emit('sendChangeName','yj666')
    }
   }
}
</script>

兄弟傳值

方式：

eventBus.js

效果：

任意組件之間相互傳值

代碼：

略

二、ref 父傳子

方式：

$refs

效果：

把父組件的fatherName屬性傳入子組件，在子組件中使用

父組件代碼：

<template>
  <div>
    父組件：{{fatherName}}
    <SonVue ref="dom"></SonVue>
    <button @click="$refs.dom.fatherName = 'yj666'">傳遞新值</button>
  </div>
</template>

子組件代碼：

<template>
    <div>
        子組件：{{fatherName}}
    </div>
</template>
<script>
export default {
   data(){
    return {
        fatherName:''
    }
   }
}
</script>

三、v-model 父子傳值

方式：

在父組件中使用 v-model

效果：

父子組件之間相互傳值

解釋：

v-model 的父子傳值模式 其實(shí)是 綁定的 value 屬性和 input 事件的語法糖，可以由 props+$emit 模式演變而來

props+$emit：

父組件代碼：

<template>
  <div>
    父組件：{{fatherName}}
    <SonVue :fatherName="fatherName" @sendChangeName="ChangeName"></SonVue>
  </div>
</template>
<script>
import SonVue from './components/Son.vue';
export default {
  data(){
    return {
      fatherName:'yj'
    }
  },
  methods:{
    ChangeName(v){
      this.fatherName = v
    }
  },
  components:{
    SonVue
  }
}
</script>

子組件代碼：

<template>
    <div>
        子組件：{{fatherName}}
        <button @click="ChangeName">修改父組件的fatherName</button>
    </div>
</template>

<script>
export default {
   props:['fatherName'],
   methods: {
    ChangeName(){
        this.$emit('sendChangeName','yj666')
    }
   }
}
</script>

核心代碼改造:

<SonVue :fatherName="fatherName" @sendChangeName="ChangeName"></SonVue>
<!-- 
改造：修改變量名和事件名
1. 把fatherName改造為value
2. 把自定義事件sendChangeName改造為input
3. 把事件ChangeName改造為fn
4. 進(jìn)一步把事件ChangeName改造為 value => value = v
5. 或者  把事件ChangeName改造為 value = $event
-->

<SonVue :value="value" @input="v => value = v"></SonVue>
<SonVue :value="value" @input="value = $event"></SonVue>

<!--
聯(lián)想：v-model 其實(shí)也可以由綁定事件:value="value" + 事件監(jiān)聽 @input="v => value = v" 組成
意味著： :value="value" @input="v => value = v" 可以替換為 v-model = ‘value’
效果：將父組件屬性 vlaue 值傳遞到子組件中使用，并子組件觸發(fā)自定義事件 input 來改變父組件中 value 的值
-->

<SonVue v-model="value"></SonVue>

v-model

父組件代碼：

<template>
  <div>
    父組件：{{value}}
    <SonVue v-model="value"></SonVue>
  </div>
</template>

<script>
import SonVue from './components/Son.vue';
export default {
  data(){
    return {
      value:'yj'
    }
  },
  components:{
    SonVue
  }
}
</script>

子組件代碼：

<template>
    <div>
        子組件：{{value}}
        <button @click="$emit('input','yj666')">修改父組件的value</button>
    </div>
</template>

<script>
export default {
   props:['value']
}
</script>

問題：

• 父組件變量只能叫 value
• 子組件自定義事件只能叫 input

解決：

通過設(shè)置 子組件 身上的model屬性，來更改變量名name和自定義事件input的問題

model:{
    prop: 'newValue',
    event: 'newInput'
}

父組件代碼：

<template>
  <div>
    父組件：{{newValue}}
    <SonVue v-model="newValue"></SonVue>
  </div>
</template>

<script>
import SonVue from './components/Son.vue';
export default {
  data(){
    return {
      newValue:'yjj'
    }
  },
  components:{
    SonVue
  }
}
</script>

子組件代碼：

<template>
    <div>
        子組件：{{newValue}}
        <button @click="$emit('newInput','yj666')">修改父組件的value</button>
    </div>
</template>

<script>
export default {
   props:['newValue'],
   model:{
       prop: 'newValue',
       event: 'newInput'
   }
}
</script>

優(yōu)勢：

v-model模式父子傳值比props+$emit模式更加簡單

缺點(diǎn)：

不能夠一次傳遞多個屬性，通過方法四可以處理

四.sync修飾符 父子傳值

方式：

在父組件中使用 綁定修飾符 :newValue.sync = ‘newValue’

效果：

父子組件之間相互傳值

解釋：

.sync 的父子傳值模式 其實(shí)是綁定的屬性和事件的語法糖

:val.sync = ‘val’ 等價于 :val"val" @update:val = “val = $event”文章來源地址http://www.zghlxwxcb.cn/news/detail-699960.html

props+$emit 模式核心代碼：

父組件代碼改造：

<SonVue :fatherName="fatherName" @sendChangeName="ChangeName"></SonVue>
<!-- 
第一次父改造：修改自定義事件名和事件內(nèi)容
1. 把自定義事件sendChangeName改造為update(此時可以任意命名)
2. 把事件名ChangeName改造為具體代碼 fatherName = $event
-->
<SonVue :fatherName="fatherName" @update="value = $event"></SonVue>
<!-- 
第二次父改造：
1. 去掉 @update="value = $event"
2. 加入.sync修飾符
-->
<SonVue :fatherName.sync="fatherName"></SonVue>

子組件代碼改造：

<button @click="ChangeName">修改父組件的fatherName</button>
<!-- 
第一次子改造：修改事件內(nèi)容
1. 把自定義事件sendChangeName改造為$emit('newValue','yj666')
-->
<button @click="$emit('newValue','yj666')">修改父組件的value</button>
<!-- 
第二次子改造：確保和父組件事件掛鉤（第二次改造時去掉的事件和內(nèi)容）
1. 在$emit('newValue','yj64666')的屬性前，加入事件名update （此時必須是update的事件名）
-->
<button @click="$emit('update:newValue','yj64666')">修改父組件的value</button>

到了這里，關(guān)于vue父子組件之間傳值的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！