vue3中的（父传子，子传父、兄弟之间传值，后代关系组件传值）

——周彤——

已于 2022-11-16 18:34:42 修改

阅读量415

点赞数 1

分类专栏： vue传值 vue 自定义事件文章标签： vue.js javascript 前端

于 2022-11-16 16:21:28 首次发布

本文链接：https://blog.csdn.net/Zt0118/article/details/127887376

版权

vue 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue传值

6 篇文章 0 订阅

订阅专栏

自定义事件

4 篇文章 0 订阅

订阅专栏

1.父传子

父组件

<template>
    <h1>app.vue根组件----{{ count }}</h1>
    <button @click="add">+1</button>
    <HelloWord :count='count'></HelloWord>
</template>
<script>
import HelloWord from './components/HelloWorld.vue'
export default{
  name:'App',
  data() {
    return {
      count:0
    }
  },
  components:{
    HelloWord
  },
  methods:{
    add(){
      this.count++
    }
  }
}
</script>
<style></style>

子组件

<template>
    <h1>helloWord.vue根组件-----{{count}}</h1>
</template>
<script>
export default{
  name:'HelloWord',
  props:{
      count:{
      type:[Number,String],
      require:true,
      default:100
    },
  },

  methods: {
  },
}
</script>
<style></style>

2.子传父

父组件(传给子组件需要用v-model进行双向绑定)

<template>
    <h1>app.vue根组件----{{ count }}</h1>
    <button @click="add">+1</button>
    <HelloWord v-model:count='count'></HelloWord>
</template>
<script>
import HelloWord from './components/HelloWorld.vue'
export default{
  name:'App',
  data() {
    return {
      count:0
    }
  },
  components:{
    HelloWord
  },
  methods:{
    add(){
      this.count++
    }
  }
}
</script>
<style></style>

子组件

需要用emits进行声明，update来更新数据

<template>
    <h1>helloWord.vue根组件-----{{count}}</h1>
    <button @click="add2">+1</button>
</template>
<script>
export default{
  name:'HelloWord',
  emits:['update:count'],
  props:{
      count:{
      type:[Number,String],
      require:true,
      default:100
    }
  },
  methods: {
     add2(){
      this.$emit('update:count',this.count+1)
    }
  },
}
</script>
<style></style>

3.兄弟传值

安装mitt包,创建eventBus

npm i mitt@2.1.0

创建eventBus.js

import mitt from 'mitt'
const bus =mitt()
export default bus

父（引入兄弟组件）

<template>
  <div>父亲</div>
  <Ge></Ge>
  <Di></Di>
</template>

<script>
import Ge from './gege.vue'
import Di from './didi.vue'

export default {
  name: 'App',
  data () {
   return {
   }
  },
  methods:{
  },
  components:{
    Ge,Di
  }
}
</script>

<style scoped>

</style>

didi.vue组件

<template>
  <div>弟弟------{{num}}</div>
</template>

<script>
import bus from './eventBus'
export default {
  name: 'Didi',
  data () {
   return {
    num:0
   }
  },
  methods:{
  },
  created(){
    bus.on('countChange',(count)=>{
      this.num=count
    })
  }
}
</script>

<style scoped>

</style>

gege.vue组件

<template>
  <div>哥哥----{{num}}</div>
  <button @click="add">+1</button>
</template>

<script>
import bus from './eventBus'
export default {
  name: 'Gege',
  data () {
   return {
    num:0
   }
  },
  methods:{
    add(){
      this.num++
      bus.emit('countChange',this.num)
    }
  }
}
</script>

<style scoped>

</style>

4.后代关系组件传值

父组件引入哥哥组件，哥哥组件引入弟弟组件

父

<template>
  <div>父亲---{{num}}</div>
  <Ge></Ge>
</template>

<script>
import Ge from './gege.vue'
export default {
  name: 'App',
  data () {
   return {
    num:0
   }
  },
    provide(){
    return{
       num:this.num
    }
  },
  methods:{
  },
  components:{
    Ge
  }
}
</script>

<style scoped>

</style>

哥哥

<template>
哥哥
  <Di></Di>
</template>

<script>
import Di from './didi.vue'
export default {
  name: 'Ge',
  data () {
   return {
   }
  },

  methods:{
  },
  components:{
    Di
  }
}
</script>

<style scoped>

</style>

弟弟

<template>
  <div>
      弟弟----{{num}}
  </div>
</template>

<script>
export default {
  name: 'Di',
  data () {
   return {
   }
  },
  inject:['num'],
  methods:{
  }
}
</script>

<style scoped>

</style>