vue3.0中在子组件中触发父组件中的函数

绝地灬酷狼 2023-01-10 10:08 461阅读 0赞

新手学习：

vue3.0中  在子组件中触发父组件中的函数的技巧目前有两个：

### 技巧一：在script中引入 defineEmit 后，import \{ defineEmit \} from 'vue' ；通过defineEmit定义事件，例如：const emit = defineEmit(\['myclick'\]); 定义了 myclick 事件，并且返回了一个函数，在点击事件里通过emit("myclick") 传递出事件，在父组件中的 引用的子组件的标签上定义上要传递的事件，具体代码如下： ###

子组件：

<template>
      <h1>{
       { msg }}</h1>
      <com></com> 
      <button @click="emitclick">emitclick</button>
    </template>
    
    <script setup>
    // 1,直接导入组件
    import com from "./com.vue";
    import { defineProps, reactive, defineEmit, useContext } from 'vue'  
    // 4，定义事件
    const emit = defineEmit(['myclick']);
    const emitclick = () => {
      emit('myclick'); 
    } 
    </script> 
    <style scoped> </style>

父组件：

<template> 
      <HelloWorld msg="Hello Vue 3 + Vite" @myclick="onmyclick"/>
    </template> 
    <script setup>
    import HelloWorld from './components/HelloWorld.vue'; 
    const onmyclick = () => {
      console.log("子组件helloword让我显示的");
    } 
    </script> 
    <style> 
    </style>

### 技巧二：先获取上下文对象，通过该对象的emit()方法进行事件的传出，其他同上; ###

子组件：

<template>  
      <button @click="emitclick">emitclick</button>
    </template>
    
    <script setup> 
    import { defineProps, reactive, defineEmit, useContext } from 'vue' 
    //3， 获取上下文
    const ctx = useContext(); 
    const emitclick = () => { 
      ctx.emit('myclick');
    } 
    </script> 
    <style scoped> 
    </style>

父组件：

<template> 
      <HelloWorld msg="Hello Vue 3 + Vite" @myclick="onmyclick"/>
    </template> 
    <script setup>
    import HelloWorld from './components/HelloWorld.vue';
    
    const onmyclick = () => {
      console.log("子组件helloword让我显示的");
    } 
    </script> 
    <style> </style>