vue2知识点————(父子通信)

vue2的知识点，更多前端知识在主页，还有其他知识会持续更新

vue组件

在Vue.js 2.x中，父子组件之间的通信是非常常见的情况，Vue提供了多种方法来实现这种通信。

Props 父向子通信 

• Props 是父组件向子组件传递数据的一种方式。通过在子组件的标签上使用属性绑定传递数据，然后在子组件中通过props接收这些数据。父组件通过属性传递数据，子组件通过props接收这些数据。

<template>
  <div>
    <child-component :message="parentMessage">child-component>
  div>
template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Message from parent'
    }
  }
}
script>
 
<template>
  <div>
    <p>{{ message }}p>
  div>
template>
 
<script>
export default {
  props: ['message']
}
script>

Events 子向父通信 

• Events 是子组件向父组件通信的一种方式。子组件通过触发事件，向父组件传递消息。父组件通过监听子组件的事件来处理消息。

<template>
  <div>
    <child-component @child-event="handleChildEvent">child-component>
  div>
template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(message) {
      console.log('Message from child:', message);
    }
  }
}
script>
 
<template>
  <div>
    <button @click="sendMessage">Send Message to Parentbutton>
  div>
template>
 
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('child-event', 'Hello from child');
    }
  }
}
script>

$refs 父向子通信 

• refs 是父组件直接访问子组件的一种方式。通过给子组件设置‘ref‘属性，父组件可以使用‘refs是父组件直接访问子组件的一种方式。通过给子组件设置‘ref‘属性，父组件可以使用‘refs`属性来访问子组件实例。

<template>
  <div>
    <child-component ref="childRef">child-component>
    <button @click="callChildMethod">Call Child Methodbutton>
  div>
template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod();
    }
  }
}
script>
 
<template>
  <div>
    <p>Child Componentp>
  div>
template>
 
<script>
export default {
  methods: {
    childMethod() {
      console.log('Method called from parent');
    }
  }
}
script>

 兄弟之间通信 

Event Bus

• 事件总线 是一种通过 Vue 实例作为中介来传递事件的方式。你可以创建一个全局的 Vue 实例作为事件总线，然后在其中监听事件和触发事件，从而实现兄弟组件之间的通信。

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
 
// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">Send Message to Component Bbutton>
  div>
template>
 
<script>
import { EventBus } from './EventBus.js';
 
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-from-A', 'Hello from Component A');
    }
  }
}
script>
 
// ComponentB.vue
<template>
  <div>
    <p>{{ message }}p>
  div>
template>
 
<script>
import { EventBus } from './EventBus.js';
 
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-from-A', (message) => {
      this.message = message;
    });
  }
}
script>

Vuex

• Vuex 是 Vue.js 的状态管理库，可以用来管理应用中的共享状态。你可以将需要共享的数据存储在 Vuex 的 store 中，然后在兄弟组件中通过 store 实现通信。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload;
    }
  }
});
 
// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">Send Message to Component Bbutton>
  div>
template>
 
<script>
export default {
  methods: {
    sendMessage() {
      this.$store.commit('setMessage', 'Hello from Component A');
    }
  }
}
script>
 
// ComponentB.vue
<template>
  <div>
    <p>{{ message }}p>
  div>
template>
 
<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
}
script>