vue3【父子组件间的传值--setup语法糖】

　　这篇文章主要讲解vue3语法糖中组件传值的用法、

　　父组件

　　子组件

　　在的中，我们使用? ?来定义父组件传递的

　　效果：

　　

　　vue3中子组件向父组件传递值和vue2.x的区别：

　　vue2.x使用的是 this.$emit 而vue3使用的是emit（因为vue3中没有this），它们的传值一样都是方法加值，即vue2.x的是?this.$emit('方法名','传递的值(根据需要传或者不传)')?，vue3的setup语法糖的是?defineEmits?。

　　【defineEmits?使用说明】

　　1、在子组件中调用?defineEmits?并定义要发射给父组件的方法，也可以传空

　　2、使用?defineEmits?会返回一个方法，使用一个变量emits(变量名随意)去接收

　　3、在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数

　　子组件的传递：

　　父组件接收：

　　vue2.0?中是通过?this.$refs?可以访问子组件的方法和属性，在?vue3?语法糖中，需要将组件的属性及方法通过?defineExpose?导出，父组件才能访问到数据，否则拿不到子组件的数据

　　例如：在子组件中我们定义了如下方法和属性

　　

　　在父组件中进行调用（分为2步）：

　　

　　

　　打印结果：

　　

　　在获取子组件绑定的ref时注意：

　　变量名称必须要与 ref 命名的属性名称一致。通过 hello.value 的形式获取 DOM 元素。必须要在 DOM 渲染完成后才可以获取 hello.value，否则就是 null。