vue之父组件之间调用方法_vue created 调async方法-优快云博客

本文链接：https://blog.youkuaiyun.com/blueSkyBoy2850/article/details/117323453

本文详细介绍了Vue.js中父子组件之间的交互方式，包括父组件如何调用子组件的方法（通过ref属性），子组件如何调用父组件的方法（通过$parent属性或$emit事件）。此外，还讲解了父组件如何将方法作为prop传递给子组件，实现子组件内部的事件响应。这些交互方式对于理解Vue应用中的组件通信至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件调用子组件方法

1.可以通过ref

//子组件里面的方法
methods: {
    async getAppIdNameArr(createBy) {
    	console.log('即将被父组件调用')
    }
  }

//父组件调用
先在子组件标签上定义个ref，然后父组件直接调用

<ChannelLinkage
          :app-id-select.sync="form.appId"
          :is-channel-default="isChannelDefault"
          :is-reset.sync="isReset"
          ref="channelLinkBox"
        ></ChannelLinkage>

setcacheForm() {
      this.$refs.channelLinkBox.getAppIdNameArr()
    },

2.子组件调用父组件方法

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

//父组件

<template>
    <div>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
      fatherFun() {
        console.log('我是父组件中的方法');
      }
    }
}
</script>


//子组件

<template>
  <div @click="clickNow">我是子组件</div>
</template>
<script>
export default {
  methods: {
    clickNow() {
    	this.$parent.fatherFun();
    },
  },
};
</script>

2.2子组件通过$emit向父组件触发一个事件(比较常用的)，父组件监听即可。

//父组件
<template>
  <div>
    <child @fatherFun="fatherFun"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherFun() {
        console.log('测试');
      }
    }
  };
</script>
//子组件
<template>
  <div>
    <button @click="childNow()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childNow() {
        this.$emit('fatherFun');
      }
    }
  };
</script>

3.父组件传递一个方法给子组件

//父组件
<template>
  <div>
    <child :fatherFun="fatherFun"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherFun() {
        console.log('测试');
      }
    }
  };
</script>
//子组件
<template>
  <div>
    <button @click="clickNow()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherFun: {
        type: Function,
        default: null
      }
    },
    methods: {
      clickNow() {
          this.fatherFun();
      }
    }
  };
</script>