vue组件之间实现数据传输（通过bus通信）

最新推荐文章于 2023-11-25 16:20:31 发布

uglyduckling0412

最新推荐文章于 2023-11-25 16:20:31 发布

阅读量283

点赞数

分类专栏：技术档案文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/uglyduckling0412/article/details/126418797

版权

技术档案专栏收录该内容

38 篇文章 1 订阅

订阅专栏

使用场景：两个组件之间互通信息

使用bus. $e mi t 配合 b u s .$ on实现数据互通

html部分：

<body>
  <div id="app">
    <child1></child1>
    <child2></child2>
  </div>
</body>

js部分：

<script>
 //new一个vue
  const bus = new Vue();
  //子组件1
  Vue.component('child1', {
    template: `
      <div id="child1">
        <input v-model="sendMsg" />
        <button @click="handleClick">发布信息</button>
      </div>
    `,
    data() {
      return {
        sendMsg: ''
      }
    },
    methods: {
      handleClick() {
        bus.$emit('sendMsg', this.sendMsg)
      }
    }
  })
//子组件2
  Vue.component('child2', {
    template: `
      <div id="child1">
        {{showMsg}}{{receiveMsg}}
      </div>
    `,
    data() {
      return {
        showMsg: '接收到的信息：',
        receiveMsg: ''
      }
    },
    mounted() {
      bus.$on('sendMsg', (data) => {
        this.receiveMsg = data;
      })
    }
  })
  const vm = new Vue({
    el: '#app',
    data: {

    }
  });
</script>