vue.js 调用其他组件

<!-- 父组件 -->
<template>
  <ChildComponent ref="childRef" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    this.$refs.childRef.someMethod(); // 调用子组件的方法
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="notifyParent">Click me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('child-event', 'some data'); // 触发事件并传递数据
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child:', data);
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :parentMessage="message" @child-event="updateMessage" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent');

    function updateMessage(newMessage) {
      message.value = newMessage;
    }

    return { message, updateMessage };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ parentMessage }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    parentMessage: String
  },
  methods: {
    sendToParent() {
      this.$emit('child-event', 'Hello from child');
    }
  }
});
</script>