Vue 组件间通信：优化效率提高开发体验

2024-01-30 03:22:24

父组件向子组件传递数据

Vue.js 组件之间的数据传递，最常见的方式是父组件通过 props 向子组件传递数据。props 是父组件向子组件传递数据的桥梁，子组件可以通过 props 接收来自父组件的数据，并根据需要进行渲染和处理。

// 父组件
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  template: `<ChildComponent :message="message" />`
}

// 子组件
export default {
  props: ['message'],
  template: `<p>{{ message }}</p>`
}

子组件通过事件向父组件传值

在 Vue.js 中，子组件可以通过 $emit 方法向父组件发出事件，父组件可以通过监听这个事件来获取子组件传递的数据。

// 子组件
export default {
  methods: {
    emitMessage() {
      this.$emit('message', 'Hello from ChildComponent!')
    }
  },
  template: `<button @click="emitMessage">Send Message</button>`
}

// 父组件
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // "Hello from ChildComponent!"
    }
  },
  template: `<ChildComponent @message="handleMessage" />`
}

兄弟组件互相传值

在 Vue.js 中，兄弟组件之间的数据传递，可以使用 $parent 和 $root 来实现。$parent 指向兄弟组件的父组件，$root 指向根组件。通过 $parent 和 $root，兄弟组件可以访问到彼此的数据和方法。

// 兄弟组件 A
export default {
  data() {
    return {
      message: 'Hello from Component A!'
    }
  },
  template: `<button @click="$root.$emit('message', message)">Send Message</button>`
}

// 兄弟组件 B
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // "Hello from Component A!"
    }
  },
  template: `<p @message="handleMessage"></p>`
}