父组件调用子组件方法及子组件跟父组件传参

父组件调用子组件方法

父页面

<user-info ref="mychild"/>

在父级定义事件比如点击执行子组件方法

this.$refs.mychild.getListManualOperate(this.info);

上边的getListManualOperate就是子组件里的方法

 

子组件跟父组件传参

在子组件通过emit来传递参数给父组件

this.$emit('appCount', res.appInfoViewList.length);

在父组件接收到相关事件

<applist-details @appCount="appCount" />

appCount(val) {
  this.appLength = val;
},

appCount是写在methods里面的方法，val是子组件传来的相关参数


另外子组件，我们都是通过监听去作加载，监听参数没变，就不会重新加载子组件。但有时候因为特殊需求，需要每一次都加载新的子组件。这时候就用到了vue中的key 属性。
使用如下：
父组件

<el-dialog title="Paylink" append-to-body :visible.sync="showPayLinklistDialog" width="80%">
   <pay-link
     :key="timer"
     :paylinkRow="paylinkRow"
     :orderId="paylinkRow.orderId"
     :fromWhere="fromWhere" />
</el-dialog>

data() {
    return {
        timer: null,
    }      
}

methods:{
    createPaylink(row) {
      this.showPayLinklistDialog = true;
      this.paylinkRow = row;
      this.timer = new Date().getTime();   //给key 直接绑定一个 时间戳
    },
}

 参考： https://blog.csdn.net/shi851051279/article/details/92802027