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


父组件调用子组件方法

父页面

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

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

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

子组件跟父组件传参

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

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

在父组件接收到相关事件

"appCount" />
appCount(val) {
  this.appLength = val;
},
appCount是写在methods里面的方法,val是子组件传来的相关参数


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

   link
     :key="timer"
     :paylinkRow="paylinkRow"
     :orderId="paylinkRow.orderId"
     :fromWhere="fromWhere" />


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



vue