vue中的父子传值

139 阅读1分钟

父子组件

如果一个组件A在组件B中被导入使用,称组件B是父组件,组件A是子组件.

父传子:

image.png

语法:

  • 父组件中:< 子组件 :自定义属性名1="父methods函数1" :自定义属性名2="父methods函数2" />
  • 子: props:['父组件中的自定义属性名1','父组件中的自定义属性名1'] ---> 接收

父传子.png

子传父: 子传父是指:从子组件内部把数据传出来给父组件使用或者修改父组件数据

image.png

语法:

  • 父组件中:< 子组件 @自定义事件名1="父methods函数1" @自定义事件名2="父methods函数2" />
  • 子: this.$emit("自定义事件名1", 传值1) ---> 执行父methods里函数代码

子传父.png

>总结:

父传子: 父组件设置自定义属性+子组件的props

子传父: 父组件设置自定义事件+子组件$emit抛出事件