vue组件传参数

在使用vue3进行开发的时候，我们一定绕不开的一个技术栈，就是组件传参。接下来我将介绍在vue3中如何运用这项技术。

在组件传参数中，分为两类，父传子参，或子传父参。需要了解的两个方法就是defineProps和defineEmits。

首先是父子传参：

        步骤思路：1.在子组件引入defineProps，定义props

                defineProps接收必须接收参数，这个参数可以是数组，数组里面的元素必须是字符串，并且每一个字符串都是对应到父组件里面自定义传参的属性的属性名字。参数也可以是对象，对象的键就是自定义传参的属性的属性名字就如下图这种msg。

        

2.接收父组件传给子组件的信息。

直接调用props里面的msg即可

3.去父组件传信息给子组件

如果没有写msg传的消息就会如下

当写了msg就会如下

        所以总结一下，父传子：三步骤，第一步父亲用自定义属性传给儿子消息，第二步，儿子定义defineProps（）确定父亲可以传子的消息的自定义属性名以及消息的要求比如类型type比如是否必填required或者初始值default。第三步，使用父亲传给儿子的消息。

其次是子传父：

        第一步：同样在子组件里面定义传给父亲的自定义事件的事件名，也就是定义defineEmits（）所以是引入defineEmits 并定义好emits

defineEmits（）只接收参数的形式是数组，并且数组的元素也只能是字符串，且字符串就是自定义可以监听的事件名字 例如getMessage

        

        第二步：因为是事件，因此需要触发，我们可以在子组件定义一个点击事件用于触发emits，

emits接收多个参数，第一个参数是自定义的事件名，后面的参数都是传给父亲的消息

第三步：接收子组件的消息，因为是自定义的事件，因此用v-on监听，也就是@，因此在父组件里面监听自定义的事件，自定义事件绑定的方法都有一个参数，参数值就是子组件告诉父组件的消息

最后展示的信息

总结：子组件传父组件消息的思路：子组件定义好defineEmits（）然后触发emits，并把消息发送给父组件，最后在父组件里面用@监听自定义的事件，最后通过绑定自定义事件的方法读取子组件传给父组件的消息。

还有一种特殊情况，子组件与子组件的参数传递，也就是先子传父，再父传子即可