vue用ref来实现父子组件之间相互调用对应方法和数据

父子组件之间获取对应方法

父组件主动获取子组件的数据和方法

 

1.调用子组件的时候 定义一个ref

<child ref="child "></child >

2.在父组件里面通过

//this.$refs.child .属性

//this.$refs.child .方法

 

<!-- 父组件页面 -->
<template>
  <div>
    <button @click="handleModify">点击</button>
    <child ref="child"></child>
  </div>
</template>

<script>
import child from "@/components/form/child.vue";
export default {
name:'',
  data () {
    return {
  ModifyData:'我是父组件的数据'
    };
  },

  created() {},

  methods: {
    handleModify(index, row) {      
     this.ModifyData = JSON.parse(JSON.stringify(row)); 
    this.$refs.child.childMethods();//父组件调用子组件的childMethods()方法
    }
  }
}

</script>
<style lang='less' scoped>
</style>

 

子组件主动获取父组件的数据和方法

在子组件里面通过

//this.$parent.属性
//this.$parent.方法

 childMethods() {
      this.isModifyclass = true;
      this.ModifyForm=this.$parent.ModifyData;
    },