父组件中:
1.setup语法糖中导入子组件
2.在子组件标签上绑定ref值
3.setup内部从vue中按需导出 getCurrentInstance 方法
4.调用getCurrentInstance方法导出proxy
5.通过proxy.$refs.子组件ref名.子组件内属性/方法 实现调用
-
- <div>
-
- <Child ref="child" />
- <button @click="changeChildren">子组件count+1button>
- div>
-
- <script setup lang="ts" name="Father">
- import { getCurrentInstance, ComponetInternalInstance,ref } from "vue";
- import Child from "./zi.vue";
- const child = ref(null)
- // as ComponetInternalInstance表示类型断言,ts时使用。否则报错,proxy为null
- const { proxy } = getCurrentInstance() as ComponetInternalInstance;
- function changeChildren() {
- proxy.$refs.child.count += 1;
- //也可以使用ref数据.value的形式调用:
- //child.value.count += 1
- console.log(child.value.name)
- }
- script>
-
- <style scoped>style>
子组件中:
1.js内需要通过defineExpose导出父组件需要使用的属性和方法即可
因为使用 的组件是默认关闭的——即通过模板引用或者
$parent
链获取到的组件的公开实例,不会暴露任何在 中声明的绑定。
可以通过 defineExpose编译器宏来显式指定在 组件中要暴露出去的属性:
关于defineExpose: 单文件组件
- <div>
-
- <div>子组件count:{{ count }}div>
- div>
-
- <script setup lang="ts" name="Child">
- import { ref, defineExpose } from "vue";
- const count = ref(0);
- defineExpose({
- count,
- });
- script>
-
- <style scoped>style>