父子互传(props,$emit())

230 阅读1分钟

父传子

父:自定义属性名 + 数据(要传递)=> :value="数据"

子:props ["父组件上的自定义属性名“] =>进行数据接收

  • 子组件在props中创建一个属性,用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性
  • 父传子的介质是props中的属性

子传父

  子:this.$emit('自定义事件名称', 数据) 子组件标签上绑定@自定义事件名称='回调函数'

  父:methods: {   回调函数() {  //逻辑处理  }  }

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
  • 子传父的介质是自定义属性

官方解释 : 父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息