The vue child component calls the parent component method and value (parent to child); the parent component calls the child component method and value (child to parent).

1. The child component calls the parent component method (parent-child-method)

Scenario: The child component is a popover component. When OK is clicked, add the new value to the parent component's list. It is necessary to call the getLIst() method of the parent component.

code:

//父组件 利用@子组件方法名="父组件方法名"，实现父传子-方法
<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')
            }
          })
        });
      },

Second, the child component calls the parent component value (parent-child-value)

Scenario: The scenario is as above. When you click Add in the parent component, you need to pass open to the child component, but the child component cannot directly modify the value of the parent component, so you need to use props to pass it.

code:

//父组件 利用：子组件定义的值='父组件值'，实现父传子-值
<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. The parent component calls the method/value of the child component (the child passes the parent-method/value)

Scenario: The scenario is as above, (1) When you click Add, you have entered a value, but if you don’t click OK, there is still a value in the input box after you click Cancel. At this time, you need to clear the value of the input box when you click Add.

(2) The parent component wants to get a certain value of the child component and use it.

code:

//父组件 父组件中添加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");
      },