Vue3 组件通信

目录

create-vue创建项目

一. 父子通信

1. 父传子

2. 子传父

 二. 模版引用(通过ref获取实例对象)

1.基本使用

 2.defineExpose

三. 跨层通信 - provide和inject

1. 作用和场景

2. 跨层传递普通数据

3. 跨层传递响应式数据

4. 跨层传递方法


create-vue创建项目

npm init vue@latest

 

一. 父子通信

1. 父传子

  1. 父组件中给子组件绑定属性

  2. 子组件内部通过props选项接收数据

// 父组件
<script setup>
import sonVue from "./son.vue";
</script>
<template>
  <sonVue msg="this is msg" />
</template>
<style scoped></style>
// 子组件
<script setup>
//子组件内部通过props选项接收数据
const props = defineProps({
  msg: String,
});
</script>
<template>
  <div>{{ msg }}</div>
</template>
<style scoped></style>

2. 子传父

  1. 父组件中给子组件标签通过@绑定事件

  2. 子组件内部通过 emit 方法触发事件

// 父组件
<script setup>
import sonVue from "./son.vue";
// 获取传递子组件传递的值 val
const getMessage = (val) => {
  console.log(val);
};
</script>
<template>
  <!-- 1.绑定自定义事件 getMessage -->
  <sonVue @getMessage="getMessage" />
</template>
<style scoped></style>
// 子组件
<script setup>
//2. 生成emit方法
const emit = defineEmits(["getMessage"]);

const sendMsg = () => {
  //3.触发自定义事件,并传递参数
  emit("getMessage", "this is msg");
};
</script>
<template>
  <button @click="sendMsg">测试</button>
</template>
<style scoped></style>

 二. 模版引用(通过ref获取实例对象)

概念:通过 ref标识 获取真实的 dom对象或者组件实例对象

1.基本使用

  1. 调用ref函数生成一个ref对象

  2. 通过ref标识绑定ref对象到标签  

<script setup>
import { ref } from "vue";
//1.调用ref函数得到ref对象
const TestRef = ref(null);

//输出得到一个RefImpl对象
console.log(TestRef);
</script>

<template>
  <!-- 2. 通过ref标识绑定ref对象 -->
  <div ref="TestRef">测试一下</div>
</template>
<style scoped></style>

 2.defineExpose

  • 默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,为了显式暴露某些属性或方法,可以使用 defineExpose
  • 常用于组件上绑定一个ref属性,来获取需要的某些属性或方法
// 子组件
<script setup>
import { ref } from "vue";
//方法
const count = ref(0);
const setCount = () => {
  count.value++;
};
//值
const a = ref("this is test data");
const b = ref(2);
defineExpose({
  a,
  b,
  setCount,
});
</script>

<template>
  <button @click="count">count</button>
</template>
<style scoped></style>
//父组件/页面
<script setup>
import TestDefineExpose from "./components/test2/TestDefineExpose.vue"; //引入

const onTest = () => {
  console.log(Exposeref.value.a);
  console.log(Exposeref.value.b);
  console.log(Exposeref.value.setCount);
};
</script>

<template>
<TestDefineExpose ref="Exposeref" />
  <button @click="onTest"></button>
</template>

三. 跨层通信 - provide和inject

1. 作用和场景

        顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

2. 跨层传递普通数据

实现步骤

  1. 顶层组件通过 provide 函数提供数据

  2. 底层组件通过 inject 函数提供数据

 

3. 跨层传递响应式数据

在调用provide函数时,第二个参数设置为ref对象

 

4. 跨层传递方法

 顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件的数据

 

Vue3的组件通信方式和Vue2有些不同,主要是因为Vue3中使用了Composition API,其中提供了两种方式进行组件通信: 1. Props 和 Emit 这是Vue2中也存在的方式,通过在父组件中向子组件传递props,子组件通过emit事件向父组件传递信息。在Vue3中,可以使用 `defineProps` 和 `defineEmits` 来定义props和emit事件。示例: ```html <!-- Parent.vue --> <template> <Child :msg="message" @send-msg="handleMsg"></Child> </template> <script> import { defineComponent, ref } from 'vue' import Child from './Child.vue' export default defineComponent({ components: { Child }, setup() { const message = ref('Hello') const handleMsg = (msg) => { console.log(`Received message from child: ${msg}`) } return { message, handleMsg } } }) </script> <!-- Child.vue --> <template> <button @click="sendMsg">Send Message</button> </template> <script> import { defineComponent, defineEmits, propType } from 'vue' export default defineComponent({ emits: ['send-msg'], props: { msg: { type: String, required: true } }, setup(props, { emit }) { const sendMsg = () => { emit('send-msg', 'Hello from child') } return { sendMsg } } }) </script> ``` 2. Provide 和 Inject Provide和Inject是Vue3中新增的方式,可以在父组件中提供数据,让子组件中使用。Provide和Inject可以传递任何类型的数据,包括对象、数组、函数等。示例: ```html <!-- Parent.vue --> <template> <div> <h1>{{ title }}</h1> <Child /> </div> </template> <script> import { defineComponent, provide } from 'vue' import Child from './Child.vue' export default defineComponent({ components: { Child }, setup() { provide('title', 'Hello from parent') } }) </script> <!-- Child.vue --> <template> <div> <h2>{{ subtitle }}</h2> </div> </template> <script> import { defineComponent, inject } from 'vue' export default defineComponent({ setup() { const title = inject('title', 'Default title') const subtitle = 'Hello from child' return { title, subtitle } } }) </script> ``` 以上是两种Vue3中常用的组件通信方式,具体使用哪种方式取决于组件之间的关系和需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值