vue父子实现

Vue 父子组件通信实现方法

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

父组件通过自定义属性（props）向子组件传递数据。子组件需要在props选项中声明接收的属性。

父组件模板：

<template>
  <ChildComponent :message="parentMessage" />
</template>

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

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

子组件接收数据：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message'] // 或使用对象形式定义类型校验
};
</script>

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

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

子组件触发事件：

<template>
  <button @click="sendData">Send to Parent</button>
</template>

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

父组件监听事件：

<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent(payload) {
      console.log(payload.data); // 输出: "some data"
    }
  }
};
</script>

使用ref访问子组件实例

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

父组件设置ref：

<template>
  <ChildComponent 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('Method called from parent');
    }
  }
};
</script>

使用v-model实现双向绑定

通过v-model可以实现父子组件数据的双向绑定，本质是value prop和input事件的语法糖。

子组件实现：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
};
</script>

父组件使用：

<template>
  <ChildComponent v-model="parentData" />
</template>

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

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

使用provide/inject跨层级通信

祖先组件通过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>