父子组件通信的方式

一、Props（属性）:

1. 父组件通过props向子组件传递数据。
2. 子组件通过props接收父组件传递的数据。

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage"></child-component>
</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>
 

二、events（事件）:

1. 子组件可以通过$emit方法触发事件，并将数据传递给父组件。
2. 父组件通过在子组件上使用v-on指令监听事件，从而接收子组件传递的数据。

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

<!-- 父组件 -->
<template>
  <child-component @message-from-child="handleMessageFromChild"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessageFromChild(message) {
      console.log(message);
    }
  }
};
</script>
 

三、Vuex:

1. Vuex是Vue.js的官方状态管理库，用于管理应用程序中的状态。
2. 父子组件可以通过Vuex共享状态，并通过mutations来改变状态。

四、$refs:

1. 父组件可以通过ref属性给子组件指定一个引用。
2. 父组件可以通过this.$refs访问子组件的实例，从而调用子组件的方法或访问子组件的数据。

 

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

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

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

<!-- 子组件 -->
<template>
  <div>Child Component</div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      console.log('Doing something in child component');
    }
  }
};
</script>