vue子组件函数怎么调用

如何调用 vue 子组件函数？插槽属性：子组件定义插槽属性，父组件传入方法，子组件监听插槽事件并调用父组件方法。refs：父组件使用 ref 引用子组件，然后通过引用访问子组件方法。**$emit：**子组件通过 $emit 发射自定义事件，父组件监听事件并执行操作。provide/inject：父组件通过 provide 提供数据或方法，子组件通过 inject 注入数据或方法。

如何调用 Vue 子组件函数

Vue 中的子组件可以调用其父组件的方法，也可以调用自己的方法。以下是如何实现的：

调用父组件方法

1. 使用插槽属性：在子组件中定义一个插槽属性，并传入父组件的方法。父组件可以向插槽传递值和事件，子组件可以监听插槽事件并调用父组件的方法。

<!-- 父组件 -->
<mycomponent><template v-slot:my-slot="props"><button>调用父组件方法</button>
  </template></mycomponent><!-- 子组件 --><template><slot name="my-slot" :myfunction="myFunction"></slot></template><script>
export default {
  methods: {
    myFunction() {
      console.log('子组件调用了父组件方法');
    }
  }
};
</script>

登录后复制

2. 使用 refs：在父组件中使用 ref 引用子组件，然后通过该引用访问子组件的方法。

<!-- 父组件 -->
<template><mycomponent ref="myComponent"></mycomponent></template><script>
export default {
  mounted() {
    this.$refs.myComponent.myFunction(); // 调用子组件方法
  }
};
</script><!-- 子组件 --><template><button>调用子组件方法</button>
</template><script>
export default {
  methods: {
    myFunction() {
      console.log('子组件方法被调用');
    }
  }
};
</script>

登录后复制

调用子组件方法

1. **使用 $emit：**在子组件中使用 $emit 发射一个自定义事件，并传递数据作为参数。父组件可以监听该事件并执行相应的操作。

<!-- 子组件 -->
<template><button>调用子组件方法</button>
</template><script>
export default {
  methods: {
    emitMyEvent() {
      this.$emit('my-event', { data: '从子组件传递的数据' });
    }
  }
};
</script><!-- 父组件 --><template><mycomponent></mycomponent></template><script>
export default {
  methods: {
    handleMyEvent(event) {
      console.log(event.data); // 接收从子组件传递的数据
    }
  }
};
</script>

登录后复制

2. 使用 provide/inject：父组件使用 provide 提供数据或方法，子组件使用 inject 注入数据或方法。

<!-- 父组件 -->
<template><provide :mymethod="myMethod"><mycomponent></mycomponent></provide></template><script>
export default {
  provide() {
    return {
      myMethod: this.myMethod
    };
  },
  methods: {
    myMethod() {
      console.log('父组件方法被调用');
    }
  }
};
</script><!-- 子组件 --><template><button>调用父组件方法</button>
</template><script>
export default {
  inject: ['myMethod'],
  methods: {
    callMyMethod() {
      this.myMethod();
    }
  }
};
</script>

登录后复制

以上就是vue子组件函数怎么调用的详细内容，更多请关注叮当号网其它相关文章！