Vue中父子组件间怎么通信?下面本篇文章给大家介绍一下父传子和子传父的方法,希望对大家有所帮助!
⭐⭐
这里我们知道,父组件有一些数据需要子组件来进行展示,那我们可以通过props
来完成组件之间的通信
通过props来完成组件之间的通信
⭐⭐
那么什么是Props
呢?
Props
是你可以在组件上注册一些自定义的attribute(属性);在使用 script setup
的单文件组件中,props
可以使用 defineProps()
宏来声明:
1)数组类型
在没有使用 script setup
的组件中,prop
可以使用 props
选项来声明:
export default { props: ['foo'], setup(props) { // setup() 接收 props 作为第一个参数 console.log(props.foo) } }
例子,对象语法的使用
App.vue
里面使用组件,属性整数props所定义的
showInfo.vue
子组件
export default { props:{ name :{ type:String, default:"我是默认值name" }, height:{ type:Number, default:2 } } }
另外:
那么type的类型都可以是哪些呢?
2)对象类型
用对象
的形式声明props
(这个还挺常用的)
使用 script setup
defineProps({ title: String, likes: Number })
非 script setup
export default { props: { title: String, likes: Number } }
⭐⭐
子组件传递给父组件通过$emit触发事件
子组件传递内容到父组件:
$emit(“add”, count)
第一个参数自定义的事件名称,第二个参数是传递的参数
⭐⭐
举一个计数器案例
1)父组件App.vue
当前计数:{{counter}}
2)子组件1AddCounter.vue
这里定义的是计数器的加操作
子组件事件触发之后,通过this.$emit的方式进行发出事件
3)子组件2SubCounter.vue
这里定义的是计数器的减操作
子组件事件触发之后,通过this.$emit
的方式进行发出事件
这个案例非常经典,可以反复琢磨一下~
(学习视频分享:编程基础视频)
以上是浅析Vue中父子组件间怎么通信(父传子|子传父)的详细内容。更多信息请关注PHP中文网其他相关文章!