vue中父子组件方法的互相调用

一，父组件调用子组件的方法

子组件代码

<script>
export default {
  name: "child",
  data() {
    return {
      message1: "",
      message2: "",
    };
  },
  methods: {
    fromParent(msg) {
      this.message1 = msg;
    },
  },
};
</script>

父组件代码

<template>
  <div id="parent">
    <button @click="toChild">click</button>
    <child ref="child"></child>
  </div>
</template>
<script>
export default {
  name: "father",
  data() {
    return {
    };
  },
  methods: {
    toChild() {
      // 调用子组件的方法
      this.$refs.child.fromParent("我是父组件给子组件传的值");
      // 直接修改子组件的值
      this.$refs.child.message2="这种方法可以直接修改子组件的值"
    },
  },
};
</script>

二，子组件调用父组件的方法

方法一，$emit

子组件代码

<template>
  <div id="child">
    <button @click="invokeFatherMethods">click</button>
  </div>
</template>
<script>
export default{
	methods:{
		invokeFatherMethods(){
			this.$emit('fatherMethods',value)
		}
	}
}
</script>

父组件代码

<template>
  <div id="father">
  	<child @fatherMethods='fatherMethods'></child>
  </div>
</template>
<script>
import child from '@/child.vue'
export default{
	name:'father',
	components: { child },
	methods:{
		fatherMethods(value){
			 // 进行函数操作
		}
	}
}
</script>

方法二 ，直接在子组件中通过this.$parent.event来调用父组件的方法

子组件代码

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

父组件代码

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('子组件通过this.$parent.父组件方法名  调用了父组件																																				的方法');
      }
    }
  };
</script>

方法三，父组件把方法传入子组件中，在子组件里直接调用这个方法

子组件代码

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

父组件代码

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件传递方法，子组件直接调用父组件的方法');
      }
    }
  };
</script>