[JavaScript知识库]组件之间传值使用方法

props/$emit

父组件传子组件

子组件

export default {
  name: "Component2",
  props: {
    username: {
      type: String,
      default: ''
    }
  },
}

父组件

<component2 :username="username"></component2>

子组件传父组件

子组件

methods: {
  update() {
    this.$emit('update', '日向雏田')
  }
},

父组件

<component2 @update="update"></component2>
methods: {
  update(item) {
    this.name = item;
  },
}

ref

父组件访问子组件（调用方法）

父组件

<component2 ref="component2"></component2>
mounted() {
  // 使用$refs
  console.log(this.$refs.component2.age);
  // 通过$refs调用子组件方法
  this.$refs.component2.update();
}

$children/$parent

父组件访问子组件

mounted() {
  // 使用$children拿子组件的值
  console.log("子组件的值：", this.$children[0].age);
}

子组件访问父组件

mounted() {
  // 使用$parent拿父组件的值
  console.log("父组件的值：", this.$parent.sex);
}

eventBus

跨组件通信

main.js

export const EventBus = new Vue()

发送方

import {EventBus} from '../../main'
methods: {
  // 通过eventbus发送事件
  event() {
    EventBus.$emit("incremented", this.person)
  }
},

接收方

import {EventBus} from '../../main'
mounted() {
  // 接收EventBus数据
  EventBus.$on('incremented', (re) => {
    this.name = re;
    console.log(re);
  })
}