＜script setup＞中父子组件传值及方法调用

75 阅读 0 评论 50 点赞

我是靠谱客的博主文静指甲油，最近开发中收集的这篇文章主要介绍＜script setup＞中父子组件传值及方法调用，觉得挺不错的，现在分享给大家，希望可以做个参考。

1.父组件向子组件传值

利用defineProps，defineProps不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。defineProps 接收与 props 选项相同的值。

<script setup>
const props = defineProps({
  parentData: {
    type: Array,
    default: () => [],
  },
});
//使用 props.parentData
</script>

使用 <script setup> 的组件是默认关闭的，父组件想调用子组件的方法。子组件可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性

父组件：

<childCom ref="childComRef" />
const childComRef = ref(null);
//调用子组件方法
childComRef.value.showFun();

子组件：

//方法
const showFun = () => {};

//利用defineExpose暴露出去
defineExpose({
  showFun,
});

利用defineEmits，defineEmits不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。defineEmits 接收与 emits 选项相同的值。

<script setup>
const emits = defineEmits(["parentChange"]);
emits("parentChange");
</script>

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。