vue组件传值,父子传值,子父传值,兄弟传值,组件主动获取数据及方法

最新推荐文章于 2025-03-22 08:00:00 发布

~那一刻~

最新推荐文章于 2025-03-22 08:00:00 发布

阅读量489

点赞数 1

分类专栏：组件传值文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45045593/article/details/107581000

版权

组件传值专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了Vue框架中组件间的通信方式，包括父子组件之间的动态传值，子组件如何通过自定义事件向父组件发送数据，以及兄弟组件间如何借助事件总线实现数据传递。每个部分都提供了具体的实现步骤和实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.父子传值

父组件引入子组件并注册
在标签通过动态绑定data里的值
子组件通过props接收父组件传递过来的参数

主动获取值

父组件里注册的子组件标签里写上ref
在mounted声明周期函数里打印this.$refs.name.msg即可

效果图
在这里插入图片描述

// 父组件
<template>
  <div>
    <fatherSon :num=num :go='go' ref="name"></fatherSon>
  </div>
</template>

<script>
  import fatherSon from './components/father_son'
export default {
  components: {
    fatherSon
  },
  data() {
    return {
      num: 6
    }
  },
  methods: {
    go() {
      alert('this is father')
    }
  },
  mounted() {
    console.log(this.$refs.name.msg)
  }
}
</script>

// 子组件
<template>
    <div>
        <button @click="go">点我</button>
        <p>{{ num }}</p>
    </div>
</template>
<script>
export default {
    props: ['num' ,'go'],
    data() {
        return {
            msg: '子组件'
        }
    },
}
</script>
<style>
    button {
        display: inline-block;
        width: 90px;
        height: 60px;
        font-size: 30px;
        line-height: 30px;
        margin-right: 20px;
    }
    p {
        font-size: 30px;
    }
</style>

二.子父传值

子组件通过自定义事件,以$emit给父组件传送一个事件
父组件通过子组件传送过来的事件去写方法

主动获取值

子组件在mounted声明周期函数中通过this.$parent.msg即可

效果图
在这里插入图片描述

// 子组件
<template>
    <div>
        <button @click="add">+</button>
        <button @click="del">-</button>
        <p>{{ num }}</p>
    </div>
</template>
<script>
export default {
    props: ['num' ,'go'],
    methods: {
        add() {
            this.$emit('addNum')
        },
        del() {
            this.$emit('delNum')
        }
    },
    mounted() {
        console.log(this.$parent.msg)
    },
    data() {
        return {
            
        }
    },
}
</script>
<style>
    button {
        display: inline-block;
        width: 90px;
        height: 60px;
        font-size: 30px;
        line-height: 30px;
        margin-right: 20px;
    }
    p {
        font-size: 30px;
    }
</style>


// 父组件
<template>
  <div>
    <fatherSon @addNum="add" @delNum="del" :num=num></fatherSon>
  </div>
</template>

<script>
  import fatherSon from './components/father_son'
export default {
  components: {
    fatherSon
  },
  data() {
    return {
      num: 6,
      msg: '父组件'
    }
  },
  methods: {
    add() {
      this.num--
    },
    del() {
      this.num++
    }
  },
}
</script>

兄弟组件传值

新建一个js文件作为仓库

import Vue from 'vue'
export default new Vue

两个兄弟组件都引入这个js文件
brother组件通过VueEvent.$emit(‘toSister’, this.msg)传数据,第一参数是数据名,第二个是参数是要传递的数据
sister组件通过 VueEvent.$on(‘toSister’, function(data) {})接收数据,第一个参数是数据名,第二个参数是函数,data就是brother传递过来的数据
效果图

// 父组件
<template>
  <div>
    <brother></brother>
    <br>
    <br>
    <sister></sister>
  </div>
</template>

<script>
  import brother from './components/brother'
  import sister from './components/sister'
export default {
  components: {
    brother,
    sister
  },
  data() {
    return {
      
    }
  },
  methods: {
   
  },
}
</script>

// brother组件
<template>
    <div>
        brother组件
        <button @click="go">传值</button>
    </div>
</template>
<script>
    import VueEvent from '../VueEvent'
export default {
    methods: {
        go() {
            VueEvent.$emit('toSister', this.msg)
        }
    },
    data() {
        return {
            msg: 'brother组件的msg'
        }
    },
}
</script>
<style>
   div {
       width: 100px;
       height: 30px;
       line-height: 30px;
       text-align: center;
   }
</style>

// sister组件
<template>
    <div>
        sister组件
    </div>
</template>
<script>
    import VueEvent from '../VueEvent'
export default {
    
    mounted() {
        VueEvent.$on('toSister', function(data) {
            this.msg = data
            console.log(this.msg)
        })
    },
    data() {
        return {
            msg: 'sister组件'
        }
    },
}
</script>
<style>
   div {
       width: 100px;
       height: 30px;
       line-height: 30px;
       text-align: center;
       background-color: red;
   }
</style>