子组件向父组件传参的几种方法

最新推荐文章于 2024-05-29 18:55:00 发布

我不会敲代码啊啊啊啊

最新推荐文章于 2024-05-29 18:55:00 发布

阅读量9.2k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/emmmmwyla/article/details/125882245

版权

本文介绍了使用Vue.js框架时，子组件向父组件传递参数的五种常见方法：1) 通过props传递函数；2) 使用自定义事件；3) 利用全局事件总线；4) 应用消息订阅与发布机制；5) 结合Vuex状态管理。每种方法都有详细的代码示例，适合初学者参考。

摘要由CSDN通过智能技术生成

子组件向父组件传参的几种方法

在用vue框架写项目的时候，多多少少会遇到子组件向父组件传参的方法。作为一个新手，确实让人头疼，于是便有了这篇小白写的总结，话不多说，开始！

以下方法全部基于这两个父子组件结构实现：

父组件

<template>
  <div class="parent">
    <div>我是父组件</div>
    <div>我收到的消息为：<span class="msg">{
  {msgP}}</span></div>
    <div>仓库里的msg: <span class="msg">{
  {this.$store.state.msg}}</span></div>
    <Child :testProps='testProps' @child='handlerChild'/>
  </div>
</template>

export default {
  name: 'ParentView',

  data() {
    return {
      msgP:'',
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};

<style scoped>
.parent {
  width: 400px;
  height: 100px;
  /* background: pink; */
}
.msg {
  color: red;
}
</style>

子组件

<template>
  <div class="child">
    <div>我是子组件</div>
    <button class="button" >porps传函数</button>
    <button class="button" >自定义事件</button>
    <button class="button" >全局事件总线</button>
    <button class="button" >消息订阅与发布</button>
    <button class="button" >vuex仓库</but