VUE父子组件通信

Updated on in 程序人生 with 0 views and 0 comments

1、父组件向子组件传递参数

父组件向子组件传递参数,通过props处理,属性是驼峰命名

props属性的类型有多个,常用的有下面几个[String,Number,Boolean,Array,Object,Function,Promise]等

如果传递的参数类型是Object,那么在父组件中修改这个Object的属性,子组件中也会跟着修改;

eg:

子组件定义(名称ContractFileAttachment):

  props: {
    contractId: {
      type: String,
      required: true
    }
  }

父组件传递:

<ContractFileAttachment :contract-id="currentContractId" />

2、子组件调用父组件方法

子组件使用$emit调用父组件定义的方法

eg:

父组件定义一个方法,并且在父组件中引入子组件的时候,用@声明调用

<AddForm :level-array="levelArr" :state-array="stateArr" @addSuccess="addSuccess" @closeAddDialog="closeAddDialog" />

两个父组件方法

addSuccess() {}
closeAddDialog() {}

在子组件中调用这两个方法

this.$emit('addSuccess')
this.$emit('closeAddDialog')

3、父组件调用子组件方法

通过refs调用

给引入的子组件定义一个ref名称,通过ref.函数名就可以直接调用子组件的方法了

this.$refs.resourceTree.getNode(node.id)

标题:VUE父子组件通信
作者:wenyl
地址:http://www.wenyoulong.com/articles/2021/08/04/1628067527321.html