快捷導(dǎo)航

vue3觸發(fā)父組件兩種寫(xiě)法

更新時(shí)間：2023年08月17日 11:29:18 作者：007。

這篇文章主要介紹了vue3觸發(fā)父組件兩種寫(xiě)法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue3觸發(fā)父組件兩種寫(xiě)法

1、正常寫(xiě)法

子組件：

import { defineComponent } from 'vue';
export default defineComponent({
  emits: ["testEmi"],
  setup(props, context) {
    const changeCollapse = () => {
        //觸發(fā)父組件事件 
      context.emit("testEmi")
    }
    return {
      testEmi
    }
  }
})

父組件：

<test @testEmit="testEmi" />

2、語(yǔ)法糖寫(xiě)法

子組件：

const emit = defineEmits(["downloadTemp"]);
const downloadTemp = () => {
  emit("downloadTemp", "12");
};

父組件：

<UpDownload @downloadTemp="downloadTempSms"/>

在 <script setup> 中必須使用 defineProps 和 defineEmits API 來(lái)聲明 props 和 emits

補(bǔ)充：vue子組件調(diào)用父組件的3種方法，超實(shí)用

1. 直接在子組件中通過(guò)this.$parent.event來(lái)調(diào)用父組件的方法

父組件：

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('測(cè)試');
      }
    }
  };
</script>

子組件：

<template>
  <div>
    <button @click="childMethod()">點(diǎn)擊</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };

2. 在子組件里用$emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽(tīng)這個(gè)事件

父組件：

<template>
  <div>
    <child @fMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log(data);
      }
    }
  };
</script>

子組件：

<template>
  <div>
    <button @click="childMethod()">點(diǎn)擊</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fMethod',data);
      }
    }
  };
</script>

3. 父組件把方法傳入子組件中，在子組件里直接調(diào)用

父組件：

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('測(cè)試');
      }
    }
  };
</script>

子組件：

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

到此這篇關(guān)于vue3觸發(fā)父組件兩種寫(xiě)法的文章就介紹到這了,更多相關(guān)vue3觸發(fā)父組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: