Vue3Ts中如何实现父组件传递给子组件

前言

        最开始我写vue3项目的时候父子组件传递数据,我直接按钮scope.row传递,子组件接收的时候为init接收,但是这种情况出现了一个情况就是当你点击弹窗的时候,明明数据已经给你传送接收了,断点查数据也没有问题,就是出现一个渲染有时候停留在上一个页面的bug。为此我改了数据传递的方法。下边是我最后改的,为此我整理了一下vue3Ts中如何实现父组件传递给子组件的方法,希望对大家有用!

Vue3Ts中如何实现父组件传递给子组件_第1张图片

Vue3Ts中如何实现父组件传递给子组件_第2张图片 

1.父传子

父组件




 

子组件

1.使用defineProps接收

2.使用withDefaults可使传递的值有默认值。

2.子传父

子组件

1.定义defineEmits

2.发送自定义事件名,给父组件





父组件

3.父组件接收




 


3.暴露属性

1.使用defineExpose后,在引用子组件的父组件,可直接使用其方法和属性

子组件




父组件

注意:声明组件的类型

ref>()




 

最后,如果大家看了之后如果对大家有用,麻烦大家点个赞,谢谢,有什么疑问欢迎评论留言。

你可能感兴趣的:(vue.js,javascript,前端)