Vue2父子组件通信方法总结

一、父组件触发子组件方法

使用 ref 引用

适用场景：父组件需要直接调用子组件的方法

复制代码

<!-- 父组件 -->
<template>
  <child ref="childRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

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

<!-- 子组件 -->
<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用');
    }
  }
}
</script>

使用自定义事件（通过 $refs 触发）

适用场景：需要传递参数给子组件方法

复制代码

<!-- 父组件 -->
<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.childRef.$emit('custom-event', params);
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  mounted() {
    this.$on('custom-event', (params) => {
      this.childMethod(params);
    });
  },
  methods: {
    childMethod(params) {
      console.log('子组件方法被调用，参数：', params);
    }
  }
}
</script>

二、子组件触发父组件方法

使用自定义事件（$emit）

适用场景：子组件向父组件传递事件

复制代码

<!-- 子组件 -->
<template>
  <button @click="triggerParentMethod">触发父组件方法</button>
</template>

<script>
export default {
  methods: {
    triggerParentMethod() {
      this.$emit('parent-event', data);
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child @parent-event="handleParentEvent" />
</template>

<script>
export default {
  methods: {
    handleParentEvent(data) {
      console.log('父组件方法被调用，数据：', data);
    }
  }
}
</script>

使用回调函数（props）

适用场景：父组件传递函数给子组件，子组件调用

复制代码

<!-- 父组件 -->
<template>
  <child :callback="parentMethod" />
</template>

<script>
export default {
  methods: {
    parentMethod(data) {
      console.log('父组件方法被调用，数据：', data);
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  props: {
    callback: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    callParentMethod() {
      this.callback(data);
    }
  }
}
</script>

三、父组件给子组件传数据

使用 props

适用场景：父组件向子组件传递静态或动态数据

复制代码

<!-- 父组件 -->
<template>
  <child :message="parentMessage" :count="parentCount" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello',
      parentCount: 10
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    }
  },
  watch: {
    message(newVal) {
      console.log('收到新的消息：', newVal);
    }
  }
}
</script>

使用 provide/inject

适用场景：深层组件嵌套时的跨层级数据传递

复制代码

<!-- 父组件 -->
<script>
export default {
  provide() {
    return {
      sharedData: this.parentData
    }
  },
  data() {
    return {
      parentData: '共享数据'
    }
  }
}
</script>

<!-- 子组件（或深层子组件） -->
<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log('注入的数据：', this.sharedData);
  }
}
</script>

四、子组件给父组件传数据

使用自定义事件（$emit）

适用场景：子组件向父组件传递数据

复制代码

<!-- 子组件 -->
<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('update-data', {
        value: this.childValue,
        message: '子组件数据'
      });
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child @update-data="handleUpdate" />
</template>

<script>
export default {
  methods: {
    handleUpdate(data) {
      console.log('收到子组件数据：', data);
      this.parentData = data;
    }
  }
}
</script>

使用 v-model 双向绑定

适用场景：需要实现父子组件数据双向绑定

复制代码

<!-- 父组件 -->
<template>
  <child v-model="parentValue" />
  <p>父组件值：{{ parentValue }}</p>
</template>

<script>
export default {
  data() {
    return {
      parentValue: '初始值'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <input v-model="localValue" @input="updateValue" />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      localValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.localValue = newVal;
    }
  },
  methods: {
    updateValue() {
      this.$emit('input', this.localValue);
    }
  }
}
</script>