O componente filho vue chama o método e o valor do componente pai (pai para filho); o componente pai chama o método e o valor do componente filho (filho para pai).

1. O componente filho chama o método do componente pai (método pai-filho)

Cenário: o componente filho é um componente popover. Quando clicar em OK, adicione o novo valor à lista do componente pai. É necessário chamar o método getLIst() do componente pai.

código:

//父组件 利用@子组件方法名="父组件方法名"，实现父传子-方法
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
                       @getList="getList"></add-follow-record>

/** 查询列表 */
getList() {
  incrementDetail(this.incrementId).then(response => {
    this.incrementIdData = response.data;
  })
},


//子组件  调用新增接口时，利用this.$emit('方法名')方法，来调用父组件的方法
/** 新增对话框 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            return;
          }
          this.$set(this.form, 'incrementId', this.incrementId)
          // 添加的提交
          incrementFollowCreate(this.form).then(res => {
            if (res.data !== null) {
              this.$modal.msgSuccess('已添加一条跟进记录!');
              this.$emit('toggleDialog')
              this.reset();
              //调用父组件获取列表接口方法
              this.$emit('getList')
            }
          })
        });
      },

Em segundo lugar, o componente filho chama o valor do componente pai (valor pai-filho)

Cenário: O cenário é o acima, ao clicar em Add no componente pai, você precisa passar aberto para o componente filho, mas o componente filho não pode modificar diretamente o valor do componente pai, então você precisa usar props para passar.

código:

//父组件 利用：子组件定义的值='父组件值'，实现父传子-值
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
                       @getList="getList"></add-follow-record>

data(){
// 是否显示弹出层
 open: false,
}


//子组件 子组件通过props接收父组件传递过来的值
<el-dialog title="" :visible.sync="open" width="35%"></el-dialog>

//props有两种写法
//法一：
props:['open']
//法二：
  props: {
    open: {
      type: String,//数据类型
      required: true//默认值
    },
  }

3. O componente pai chama o método/valor do componente filho (o filho passa o método/valor pai)

Cenário: O cenário é o seguinte, (1) Ao clicar em Adicionar, você já inseriu um valor, mas se não clicar em OK, a caixa de entrada ainda terá um valor após clicar em Cancelar. limpe o valor da caixa de entrada ao clicar em Adicionar.

(2) O componente pai deseja obter um determinado valor do componente filho e usá-lo.

código:

//父组件 父组件中添加ref属性，这样就可以获取子组件的dom的方法或值
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
                       @getList="getList"></add-follow-record>

/** 打开对话框 */
      addFollowRecord() {
        this.open = true;
        //利用this.$refs.ref名称.子组件方法名可以调用子组件的方法（子传父-方法）
        this.$refs.followRecord.reset()
        //利用this.$refs.ref名称.子组件值可以将子组件的值赋值给父组件（子传父-值）
        this.msg = this.$refs.followRecord.message
      },


//子组件
data(){
    message:'子组件数据'
}

      /** 表单重置 */
      reset() {
        this.form = {
          ...
        };
        this.resetForm("form");
      },