vue2 父组件调用子组件方法

Vue.js 是一种用于构建用户界面的渐进式前端框架，其中 Vue 组件是核心概念之一。Vue 中的组件可以理解为自包含、可复用的 UI 单元，每个组件都可以有自己的状态、模板以及功能。

当您需要从父组件调用子组件的方法时，有几种可行的方式：

### 1. 直接访问属性

如果您的子组件暴露了一个方法作为全局属性（例如 `data` 或 `methods` 部分），您可以直接通过 `this.$parent` 访问到父组件实例，并调用其方法。

<!-- 子组件中 -->
<template>
  <button @click="callParentMethod">Call Parent Method</button>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.someFunction();
    }
  }
}
</script>

// 父组件中
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    someFunction() {
      console.log('Called by parent');
    }
  }
};

### 2. 使用事件通信

更推荐的做法是使用事件系统。您可以将方法绑定到子组件上，然后通过事件传递给父组件。

<!-- 子组件中 -->
<template>
  <button @click="onClick">Call Parent Method</button>
</template>

<script>
export default {
  methods: {
    onClick(event) {
      // 触发事件向父组件传递数据或请求调用方法
      this.$emit('call-parent-method', '传入的数据');
    }
  }
}
</script>

// 父组件中
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      passedData: ''
    };
  },
  methods: {
    onParentMethodCalled(data) {
      console.log(`Received Data: ${data}`);
    }
  },
  created() {
    // 如果你想让子组件默认触发这个事件，你可以这么做
    this.$refs.childComponent.onClick(); // 这里的 childComponent 应该是一个 ref 变量引用子组件
  }
};

### 3. 使用 Vuex 状态管理

对于复杂的应用，尤其是大型项目，建议使用像 Vuex 这样的状态管理模式。它允许你在整个应用中共享和管理状态，包括调用跨组件的方法。

// 在 Vuex store 中添加一个动作和对应的状态
store.js:

const state = () => ({
dataToPass: ''
});

const mutations = {
setDataToPass(state, payload) {
state.dataToPass = payload;
}
};

const actions = {
sendData({ commit }) {
commit('setDataToPass', '数据');
}
};

export default new Vuex.Store({
state,
mutations,
actions
});

// 父组件中调用动作
<template>
<!-- ... -->
</template>

<script>
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions(['sendData']),
sendDataFromParent() {
this.sendData();
}
}
}
</script>

这三种方式分别针对了简单的案例、常用的事件驱动场景以及复杂应用中的状态管理和组件交互需求。选择哪种方式取决于具体的项目需求和团队的编码规范。