父子组件传参用法

一、父传子

1、定义父组件内容

//这是父组件内容
<template>
  <div>
    <ChildComponent :data="message" />
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
//引入子组件
import ChildComponent from './ChildComponent.vue';

const message = 'Hello from Parent';
</script>

2、定义子组件内容

<template>
  <div>{{ data }}</div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  data: String
});
</script>

<style scoped>
</style>

二、子传父

1、子组件内容

<template>
  <button @click="sendDataToParent">Click me</button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const emit = defineEmits();

const sendDataToParent = () => {
  emit('childEvent', 'Data from child component');
};
</script>

//在子组件中，我们定义了一个 sendDataToParent 函数，在该函数中使用 emit 方法来触发一个名为 'childEvent' 的事件，并且将数据 'Data from child component' 作为参数传递给父组件。

2、父组件内容

<template>
  <div>
    <ChildComponent @childEvent="handleChildData" />
    <p>Received data from child: {{ receivedData }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const receivedData = ref('');

const handleChildData = (data: string) => {
  receivedData.value = data;
};
</script>

<style scoped>
/* 在这里编写父组件的样式 */
</style>

//在父组件中，我们监听子组件触发的 'childEvent' 事件，并且定义了一个 handleChildData 函数来接收子组件传递过来的数据，并更新父组件的状态。

通过上述方法，你可以实现子组件向父组件传递数据的功能。当子组件中的按钮被点击时，会触发事件并将数据传递给父组件，父组件则可以根据接收到的数据做相应的处理。

三、要将一个方法从子组件暴露给父组件，可以使用 expose 函数来实现。下面是一个示例，演示了如何在子组件中定义一个方法并将其暴露给父组件：

1、子组件代码

<template>
  <button @click="incrementCounter">Increment Counter</button>
</template>

<script setup lang="ts">
import { ref, expose } from 'vue';

const counter = ref(0);

const incrementCounter = () => {
  counter.value++;
};

// 将方法暴露给父组件
expose({
  incrementCounter
});
</script>

//在子组件中，我们定义了一个 incrementCounter 方法用于增加计数器的值，并且使用 expose 函数将该方法暴露给父组件。

2、父组件代码

<template>
  <div>
    <ChildComponent :increment="incrementChildCounter" />
    <p>Counter in parent component: {{ parentCounter }}</p>
  </div>
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const parentCounter = ref(0);

const incrementChildCounter = () => {
  parentCounter.value++;
};
</script>

//在父组件中，我们导入子组件并定义了一个 incrementChildCounter 方法，该方法用于调用子组件暴露的 incrementCounter 方法。通过这种方式，子组件中的 incrementCounter 方法可以被父组件调用，实现了子组件向父组件暴露方法的功能。