vue实现父子通讯

Vue 父子组件通信方法

父组件向子组件传递数据（Props）

父组件通过 props 向子组件传递数据。子组件需要在 props 中声明接收的属性。

父组件模板：

<template>
  <child-component :message="parentMessage" />
</template>

父组件脚本：

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

子组件脚本：

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

子组件向父组件传递数据（自定义事件）

子组件通过 $emit 触发自定义事件，父组件通过 v-on 监听事件。

子组件模板：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

子组件脚本：

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
};
</script>

父组件模板：

<template>
  <child-component @message-sent="handleMessage" />
</template>

父组件脚本：

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleMessage(message) {
      console.log(message); // 'Hello from child'
    }
  }
};
</script>

使用 ref 访问子组件实例

父组件可以通过 ref 直接访问子组件的属性和方法。

父组件模板：

<template>
  <child-component ref="childRef" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

父组件脚本：

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod();
    }
  }
};
</script>

子组件脚本：

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    }
  }
};
</script>

使用 v-model 实现双向绑定

Vue 的 v-model 是 props 和自定义事件的语法糖。

子组件脚本：

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

父组件模板：

<template>
  <child-component v-model="parentValue" />
</template>

父组件脚本：

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentValue: ''
    };
  }
};
</script>

使用 Provide/Inject 跨层级传递数据

适用于深层嵌套组件通信的场景。

祖先组件脚本：

<script>
export default {
  provide() {
    return {
      sharedData: 'Data from ancestor'
    };
  }
};
</script>

后代组件脚本：

<script>
export default {
  inject: ['sharedData'],
  created() {
    console.log(this.sharedData); // 'Data from ancestor'
  }
};
</script>

使用 Event Bus 实现非父子组件通信

创建一个中央事件总线实现任意组件间通信。

创建 event-bus.js：

import Vue from 'vue';
export const EventBus = new Vue();

发送事件组件：

<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from component');
    }
  }
};
</script>

接收事件组件：

<script>
import { EventBus } from './event-bus.js';

export default {
  created() {
    EventBus.$on('message', message => {
      console.log(message); // 'Hello from component'
    });
  }
};
</script>

使用 Vuex 状态管理

对于复杂应用，建议使用 Vuex 进行状态管理。

store.js：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedData: ''
  },
  mutations: {
    updateData(state, payload) {
      state.sharedData = payload;
    }
  },
  actions: {
    setData({ commit }, data) {
      commit('updateData', data);
    }
  }
});

组件中提交 mutation：

this.$store.commit('updateData', 'new data');

组件中分发 action：

this.$store.dispatch('setData', 'new data');

组件中访问 state：

computed: {
  sharedData() {
    return this.$store.state.sharedData;
  }
}

以上方法涵盖了 Vue 中父子组件通信的主要方式，可以根据具体场景选择合适的方法。对于简单场景，props 和自定义事件足够；对于复杂场景，建议考虑 Vuex 或 Event Bus。