vue组件消息传递(子传父父传子兄弟间传值)

逐渐心动

已于 2022-07-13 09:28:45 修改

阅读量271

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-07-08 15:45:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44701385/article/details/125679636

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

这篇博客探讨了在Vue中如何实现父子组件间的通信，利用pubsub-js库实现发布订阅模式，以及组件间通过$bus传递数据的方法。文章详细展示了代码示例，包括one组件、App组件和two组件的交互过程，涉及事件监听和触发，以及数据的传递和接收。

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

看图

在这里插入图片描述

one

<template>
    <div>
        <img :src='imgurl' width=450 height=300/> 子给传父的图片
        <App><h3>{{fuchuanzi}}</h3></App>
        <el-button @click="toTwo()" type="success">给two传值</el-button>
    </div>
</template>

<script>
import PubSub from 'pubsub-js' //引入pubsub.js 他是一种发布订阅者模式，父子都要引入
export default {
  name: "VueOne",
  props: {
    fuchuanzi: String //这边接收到直接可以插值表达式应用
  },
  data() {
    return {
      imgurl: require("../assets/aaaa.jpg"),
    };
  },
  mounted() {
      PubSub.subscribe("hello", (mes, data) => {
        alert("子收到了一条消息："+data);
      });
  },
  methods: {
    toTwo(){
      this.$bus.$emit('to-two', '您好兄弟two')
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

app

<template>
  <div id="app">
    <HelloWorld msg="这是HelloWorld的部分"/>
    <div id="user" width="500px">
      <h1>这是two部分</h1>
      <Two></Two>
    </div>

    <div id="one" width="500px">
      <h1>这是one部分</h1>
    <one :fuchuanzi="fuchuanzi1"/>
    请输入发布的内容：<input v-model="msg"/>
    <el-button @click="zzz()" type="danger">父亲发布消息</el-button>

    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Two from './components/Two.vue'
import One from './components/One.vue'
import PubSub from 'pubsub-js' //引入pubsub.js 他是一种发布订阅者模式，父子都要引入
export default {
  name: 'App',
  components: {
    HelloWorld,
    Two,
    One,
  },
  props: {
    sayHello: Function
  },
  data() {
    return {
      fuchuanzi1: "父传给子的一段消息",
      msg: ""
    }
  },
  methods: {
    zzz(){
        PubSub.publish('hello', this.msg)
    }
    },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#user {
  background: pink;
}
#one {
  background: yellowgreen;
}
</style>

two

<template>
    <div>
        <h1>{{msg}}</h1>
        <el-button @click="hello()" type="success">点我试试！</el-button>
    </div>
</template>

<script>
export default {
    name: 'Two',
    data() {
        return {
            msg: '我是一个变量 子的变量传到父'
        };
    },

    methods: {
        hello() {
            alert('子的方法在父应用')
        }
    },
    mounted(){
        this.$bus.$on('to-two', function (data) {
      console.log(data,'哥哥two组件传过来的数据')
    })
    }

};
</script>

<style lang="scss" scoped>

</style>