Vue 3 父子组件互调方法 - setup 语法糖写法

Vue 3 父子组件互调方法 - setup 语法糖写法

文章目录

  • Vue 3 父子组件互调方法 - setup 语法糖写法
  • 一、父组件调用子组件方法
    • 1、子组件
    • 2、父组件
    • 3、测试结果
    • 4、关于 defineExpose 的官方文档
  • 二、子组件调用父组件方法
    • 1、子组件
    • 2、父组件
    • 3、测试结果
    • 4、关于 defineEmits 的官方文档
    • 5、仅限类型的 emit 声明

下面演示均为使用 setup 语法糖的情况!

一、父组件调用子组件方法

下面演示为使用 setup 语法糖的情况,值得注意的是子组件需要使用 defineExpose 对外暴露方法,父组件才可以调用!

1、子组件






2、父组件






3、测试结果

Vue 3 父子组件互调方法 - setup 语法糖写法_第1张图片

4、关于 defineExpose 的官方文档

网址:https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

defineExpose

使用

2、父组件






3、测试结果

Vue 3 父子组件互调方法 - setup 语法糖写法_第2张图片

4、关于 defineEmits 的官方文档

网址:https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-和-defineemits

definePropsdefineEmits

你可能感兴趣的:(Vue.js,vue,setup,父子组件)