1 响应式解构属性
在 Vue 中，Props 是父子组件之间传递数据的强大方式。Prop 数据是响应性的，这意味着在父组件中对道具值的更改将反映在接收 Prop 的子组件中。然而，子组件不能直接修改 Prop 的值。相反，它应该发出一个事件来通知父组件更新 Prop。
在解构 Vue 的 props 时，prop 数据在过程中会失去反应性。然而，有一种方法可以在解构 props 时保持反应性。你可以使用 toRefs 指令来包装 props 对象，并在解构过程中保持反应性。有了这个指令，你可以在不担心失去反应性的情况下解构 prop 数据。
<script setup lang="ts">import { toRefs } from 'vue'
const props = withDefaults( defineProps<{ event: object; address: string; }>(), {});
const { address } = toRefs(props)</script>
<template> <div> {{ address }} </div></template>
复制代码
2 从组件外部调用方法
在 Vue 中，我们可以借助 defineExpose 宏从特定组件外部调用方法。这在处理某种方式上相互依赖的多个组件时特别有用。
defineExpose 宏可以暴露出组件属性，这些属性可以在其他组件中通过refs进行访问，从而允许你在特定组件中调用方法。这也可以让你访问变量声明，props 等等。
<script setup lang="ts"> function doSomething(){ // do smething } defineExpose({ doSomething });</script>
<div> <h1>Child component</h1> </div>
复制代码
现在我们可以在任何地方导入该组件，并按照下面的示例调用其中的各种方法。
<script setup lang="ts">import { ref, onMounted} from 'vue';import ChildComponent from './ChildComponent';const childComponent = ref();
onMounted(() => { childComponent.value.doSomething();});</script>
<div id="app"> <ChildComponent ref="childComponent" /></div>
复制代码
3 TODO
<script lang="ts" setup>import {provide } from 'vue';
provide('contractForm', contractInfo);
</script>
复制代码
<script lang="ts" setup>import { ref, reactive, inject, watch, onMounted, onActivated } from 'vue';
const contractInfo = inject('contractForm') as TypeContractInfo;
</script>
复制代码
评论