vue3组件通信

Vue3是Vue.js的最新版本，它引入了一些新的特性和改进，包括更好的性能、更好的类型检查、更好的开发体验等。在Vue3中，组件通信仍然是一个非常重要的话题，因为在大多数应用程序中，不同的组件之间需要进行数据传递和交互。

在Vue3中，组件通信有多种方式可供选择，包括props、事件、provide/inject、$attrs/$listeners、ref和响应式API等。下面将详细介绍每种方式的使用方法和特点。

1. Props
   Props是Vue中最常用的一种组件通信方式，它允许父组件向子组件传递数据。在Vue3中，使用props的方式与Vue2中基本相同，父组件通过在子组件上定义props属性来传递数据，子组件通过props选项来接收数据。

父组件中的示例代码：

<template>
  <child-component :message="message"></child-component>
</template>

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

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

子组件中的示例代码：

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

2. 事件
   事件是Vue中另一种常用的组件通信方式，它允许子组件向父组件发送消息。在Vue3中，使用事件的方式与Vue2中基本相同，子组件通过$emit方法触发一个事件，父组件通过在子组件上使用v-on指令来监听事件。

子组件中的示例代码：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

父组件中的示例代码：

<template>
  <child-component @message="handleMessage"></child-component>
</template>

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

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

3. provide/inject
   provide/inject是Vue3中新增的一种组件通信方式，它允许父组件向子组件传递数据，而不需要通过props。在Vue3中，父组件通过在组件实例上使用provide选项来提供数据，子组件通过在组件实例上使用inject选项来接收数据。

父组件中的示例代码：

<template>
  <child-component></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from parent component'
    };
  }
};
</script>

子组件中的示例代码：

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

<script>
export default {
  inject: ['message']
};
</script>

4. $attrs/$listeners
   $attrs和$listeners是Vue3中新增的两个属性，它们可以在组件中直接访问父组件传递的属性和事件监听器。$attrs包含了父组件传递的所有属性，$listeners包含了父组件传递的所有事件监听器。

子组件中的示例代码：

<template>
  <div>{{ $attrs.message }}</div>
  <button @click="$listeners.sendMessage">Send Message</button>
</template>

父组件中的示例代码：

<template>
  <child-component :message="message" @sendMessage="handleMessage"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent component'
    };
  },
  methods: {
    handleMessage() {
      console.log('Message sent from child component');
    }
  }
};
</script>

5. Ref
   Ref是Vue3中新增的一个API，它允许在组件中创建一个响应式的引用。Ref可以用来包装一个普通的JavaScript值，并且在组件中使用时可以自动追踪其变化。

子组件中的示例代码：

<template>
  <div>{{ message.value }}</div>
  <button @click="message.value = 'Hello from child component'">Change Message</button>
</template>

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

export default {
  setup() {
    const message = ref('Hello from parent component');
    return {
      message
    };
  }
};
</script>

父组件中的示例代码：

<template>
  <child-component :message="message"></child-component>
</template>

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

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

6. 响应式API
   Vue3中引入了一组新的API，用于创建响应式的数据和操作数据。这些API包括reactive、toRefs、readonly等。使用这些API可以更方便地在组件之间共享和操作数据。

父组件中的示例代码：

<template>
  <child-component :message="message"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const state = reactive({
      message: 'Hello from parent component'
    });
    return {
      message: state.message
    };
  }
};
</script>

子组件中的示例代码：

<template>
  <div>{{ message }}</div>
  <button @click="message = 'Hello from child component'">Change Message</button>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

原文链接：https://juejin.cn/post/7332735436324683830 作者：前端fighter