前端培训丁鹿学堂：vue3的setup语法糖总结（二）

一 =》》 props父子传值在setup语法糖中的使用

1父组件传值和之前一样：示例代码：

 
1

2子组件接收使用props更方便了

1
2
3
4
5
6
7
8
9
10

3 接收的简单写法（不校验类型的数组形式接收）

1
2
3
4
5

二 =》》子组件通过emit给父组件传值的setup使用

子组件通过引入defineEmits使用，需要 通过emit触发的事件名作为参数数组的元素传递给defineEmits，defineEmits调用的结果再去触发。

1
2
3
4
5
6
7

父组件正常监听，和之前的写法一样

1

三 =》》获取子组件ref变量在setup语法糖中的使用

在子组件上绑定ref属性是一样的。父组件通过ref获取子组件不再使用$refs.xxx 而是使用引入的ref组合式api，示例代码如下：
通过ref去定义要获取的ref绑定的dom，dom是在ref定义的变量的value属性上。
注意：获取的编程了xx.value value是必须的。

1
2
3
4
5
6
7
8
9
10
11
12