vue父子组件之间传值的方法

一、基本父子传值

父传子

方式:

props

效果:

把父组件的fatherName属性传入子组件,在子组件中使用

父组件代码:
<template>
  <div>
    父组件:{{fatherName}}
    <SonVue :fatherName="fatherName"></SonVue>
  </div>
</template>
子组件代码:
<template>
    <div>
        子组件:{{fatherName}}
    </div>
</template>

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

子传父

方式:

$emit

效果:

在子组件触发事件,修改父组件的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 的父子传值模式 其实是 绑定的 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. 进一步把事件ChangeName改造为 value => value = v
5. 或者  把事件ChangeName改造为 value = $event
-->

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

<!--
联想:v-model 其实也可以由绑定事件:value="value" + 事件监听 @input="v => value = v" 组成
意味着: :value="value" @input="v => value = v" 可以替换为 v-model = ‘value’
效果:将父组件属性 vlaue 值传递到子组件中使用,并子组件触发自定义事件 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
解决:

通过设置 子组件 身上的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>
优势:

v-model模式父子传值比props+$emit模式更加简单

缺点:

不能够一次传递多个属性,通过方法四可以处理

四.sync修饰符 父子传值

方式:

在父组件中使用 绑定修饰符 :newValue.sync = ‘newValue’

效果:

父子组件之间相互传值

解释:

.sync 的父子传值模式 其实是绑定的属性和事件的语法糖

:val.sync = ‘val’ 等价于 :val"val" @update:val = “val = $event”

props+$emit 模式核心代码:
父组件代码改造:
<SonVue :fatherName="fatherName" @sendChangeName="ChangeName"></SonVue>
<!-- 
第一次父改造:修改自定义事件名和事件内容
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>
<!-- 
第一次子改造:修改事件内容
1. 把自定义事件sendChangeName改造为$emit('newValue','yj666')
-->
<button @click="$emit('newValue','yj666')">修改父组件的value</button>
<!-- 
第二次子改造:确保和父组件事件挂钩(第二次改造时去掉的事件和内容)
1. 在$emit('newValue','yj64666')的属性前,加入事件名update (此时必须是update的事件名)
-->
<button @click="$emit('update:newValue','yj64666')">修改父组件的value</button>
Logo

前往低代码交流专区

更多推荐