VUE–组件通信（非父子）

本文介绍: 一、非父子通信 — event bus 事件总线作用：非父子组件之间进行步骤：1、创建一个都能访问到的事件总线（空vue实例）— utils/EventBus.js二、非父子通信 — provide & inject。

作用：非父子组件之间进行简易的消息传递

步骤：

1、创建一个都能访问到的事件总线（空vue实例）— utils/EventBus.js

import Vue from 'vue'
export default new Vue({})

2、接收方（A组件），监听Bus实例的事件

<script>
import bus from '@/bus'
export default {
  created() {
    bus.$on('sendInfo', val => {
      console.log('接收的数据：' + val)
    })
  },
}
</script>

3、发送方（B组件），触发Bus实例的事件

<button @click="send">发送数据</button>

<script>
import bus from '@/bus' // @代表src文件夹
export default {
  methods: {
    send() {
      bus.$emit('sendInfo', '发送的数据')
    },
  },
}
</script>

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

<script>
import Son from './components/Son.vue'
export default {
  data() { return {} },
  provide: {
    // 传递给下层的数据
    user: { name: 'John', age: '18' },
  },
  components: { Son, },
}
</script>

<template>
  <div>
    <h2>儿子组件--{{ user.name }}</h2>
    <hr />
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  name: 'SonPage',
  // inject取值
  inject: ['user'],
  components: { GrandSon, },
}
</script>

<template>
  <div>
    <h3>孙子组件 -- {{ user.age }}</h3>
  </div>
</template>

<script>
export default {
  inject: ['user'],
}
</script>

import { computed } from 'vue'

provide: {
    // 传递给下层的数据
    user: { name: 'John', age: '18' },
    phone: computed('1212121')
},

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

vue 总线父子

一、非父子通信 — event bus 事件总线

二、非父子通信 — provide & inject

注意：

发表回复取消回复

一、非父子通信 — event bus 事件总线

二、非父子通信 — provide & inject

注意：

相关文章

发表回复 取消回复

发表回复取消回复