vue3组件通信

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

在Vue3中,组件通信有多种方式可供选择,包括props、事件、provide/inject、 <math xmlns="http://www.w3.org/1998/Math/MathML"> a t t r s / attrs/ </math>attrs/listeners、ref和响应式API等。下面将详细介绍每种方式的使用方法和特点。

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

父组件中的示例代码:

html 复制代码
<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>

子组件中的示例代码:

html 复制代码
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>
  1. 事件 事件是Vue中另一种常用的组件通信方式,它允许子组件向父组件发送消息。在Vue3中,使用事件的方式与Vue2中基本相同,子组件通过$emit方法触发一个事件,父组件通过在子组件上使用v-on指令来监听事件。

子组件中的示例代码:

html 复制代码
<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

父组件中的示例代码:

html 复制代码
<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>
  1. provide/inject provide/inject是Vue3中新增的一种组件通信方式,它允许父组件向子组件传递数据,而不需要通过props。在Vue3中,父组件通过在组件实例上使用provide选项来提供数据,子组件通过在组件实例上使用inject选项来接收数据。

父组件中的示例代码:

html 复制代码
<template>
  <child-component></child-component>
</template>

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

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

子组件中的示例代码:

html 复制代码
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>
  1. <math xmlns="http://www.w3.org/1998/Math/MathML"> a t t r s / attrs/ </math>attrs/listeners <math xmlns="http://www.w3.org/1998/Math/MathML"> a t t r s 和 attrs和 </math>attrs和listeners是Vue3中新增的两个属性,它们可以在组件中直接访问父组件传递的属性和事件监听器。 <math xmlns="http://www.w3.org/1998/Math/MathML"> a t t r s 包含了父组件传递的所有属性, attrs包含了父组件传递的所有属性, </math>attrs包含了父组件传递的所有属性,listeners包含了父组件传递的所有事件监听器。

子组件中的示例代码:

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

父组件中的示例代码:

html 复制代码
<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>
  1. Ref Ref是Vue3中新增的一个API,它允许在组件中创建一个响应式的引用。Ref可以用来包装一个普通的JavaScript值,并且在组件中使用时可以自动追踪其变化。

子组件中的示例代码:

html 复制代码
<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>

父组件中的示例代码:

html 复制代码
<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>
  1. 响应式API Vue3中引入了一组新的API,用于创建响应式的数据和操作数据。这些API包括reactive、toRefs、readonly等。使用这些API可以更方便地在组件之间共享和操作数据。

父组件中的示例代码:

html 复制代码
<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>

子组件中的示例代码:

html 复制代码
<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>
相关推荐
燕山石头3 分钟前
解决 IntelliJ IDEA Build时 Lombok 不生效问题
java·前端·intellij-idea
chancygcx_9 分钟前
前端核心技术Node.js(二)——path模块、HTTP与模块化
前端·http·node.js
YGY_Webgis糕手之路10 分钟前
Cesium 快速入门(三)Viewer:三维场景的“外壳”
前端·gis·cesium
丘色果20 分钟前
NPM打包时,报reason: getaddrinfo ENOTFOUND registry.nlark.com
前端·npm·node.js
姜太小白27 分钟前
【前端】CSS Flexbox布局示例介绍
前端·css
我命由我123451 小时前
Spring Boot 项目问题:Web server failed to start. Port 5566 was already in use.
java·前端·jvm·spring boot·后端·spring·java-ee
南囝coding1 小时前
最近Vibe Coding的经验总结
前端·后端·程序员
前端小咸鱼一条1 小时前
React组件化的封装
前端·javascript·react.js
随便起的名字也被占用2 小时前
leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
前端·javascript·vue.js·leaflet
南方kenny2 小时前
TypeScript + React:让前端开发更可靠的黄金组合
前端·react.js·typescript