vant36.5洗面奶,vant3 form表单,vant3 indexbar二次封装,vant3 dialog组件点击保持,vant3 van-filed 配合error的用法,vant3 dialog
Vant3 useRelation 是一个 Vue 3 组件库 Vant3 中提供的自定义组件通信方式，它可以让父子组件之间进行数据传递和方法调用。

使用 useRelation 需要在父组件中通过 provide 提供一个唯一标识符，在子组件中通过 inject 注入这个标识符来建立通信关系。然后就可以在子组件中通过 ref 拿到父组件实例，从而调用父组件的方法或者直接访问父组件的属性。

下面是一个简单的示例：


<template>
<div>
<p>父组件计数器：{{ count }}</p>
<ChildComponent />
</div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
components: {
ChildComponent,
},
setup() {
const count = ref(0);

const incrementCount = () => {
count.value++;
};

const countInfo = {
count,
incrementCount,
};

return {
countInfo,
};
},
provide() {
return {
countInfo: this.countInfo,
};
},
});
</script>


在这个示例中，父组件通过 provide 提供了一个名为 countInfo 的标识符，它包含了一个计数器 count 和一个增加计数器的方法 incrementCount。然后在模板中引入了一个名为 ChildComponent 的子组件。


<template>
<div>
<p>子组件计数器：{{ childCount }}</p>
<button @click="incrementParentCount">增加父组件计数器</button>
</div>
</template>

<script>
import { defineComponent, inject, ref } from 'vue';

export default defineComponent({
setup() {
const countInfo = inject('countInfo');

const childCount = ref(0);

const incrementParentCount = () => {
countInfo.incrementCount();
};

return {
childCount,
incrementParentCount,
};
},
});
</script>


在子组件中，通过 inject 注入了父组件提供的 countInfo 标识符，并通过 ref 拿到了父组件实例。然后定义了一个名为 childCount 的计数器，并提供了一个增加父组件计数器的方法 incrementParentCount，它通过调用父组件中的 incrementCount 方法来实现。

这样，父子组件之间就建立了通信关系，子组件可以通过 ref 访问父组件中的数据和方法，从而实现了数据传递和方法调用的功能。