Vue父組件調用子組件方法----多種寫法

目錄

• 一、父組件中引入子組件
• 二、父組件中調用子組件的方法
  • 1、export default 寫法
  • 2、父組件 setup 寫法
  • 3、子父組件都用 setup 寫法

一、父組件中引入子組件

• 父組件 parent.vue

<template>
    <div>
    <!-- 調用子組件，子組件的全部內容會顯示在這個div中 -->
        <Child/>
    </div>
</template>    

<script setup>
// import 子組件的相對路徑
import Child from './child.vue' 
</script>

• 子組件 child.vue

<template>
    <div>我是子組件</div>
</template>
<script>
</script>

二、父組件中調用子組件的方法

1、export default 寫法

• 父組件 parent.vue

<template>
    <div>
        <Button @click="handleClick">點擊調用子組件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

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

export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childmethod")    //子組件$on中的名字
        },
    },
}
</script>

• 子組件 child.vue

<template>
    <div>我是子組件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childmethods', function() {
                console.log('我是子組件方法');
            });
        });
     },
};
</script>

2、父組件 setup 寫法

• 父組件 parent.vue

<template>
    <div>
        <Button @click="handleClick">點擊調用子組件方法</Button>
        <Child ref="Child"/>
    </div>
</template>    

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

const Child = ref(null)

function handleClick(){
  Child.value.printfunction();
}


</script>

• 子組件 child.vue

<template>
    <div>我是子組件</div>
</template>
<script>
export default {
    methods() {
        printfunction(){
          console.log('我是子組件方法');
        }  
     },
};
</script>

3、子父組件都用 setup 寫法

• 父組件 parent.vue

<template>
    <div>
        <Button @click="handleClick">點擊調用子組件方法</Button>
        <Child ref="Child"/>
    </div>
</template>    

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

const Child = ref(null)

function handleClick(){
  Child.value.printfunction();
}


</script>

• 子組件 child.vue

<template>
    <div>我是子組件</div>
</template>
<script setup>
  
  function printfunction(){
    console.log('我是子組件方法');
  }  
  
  // 將子組件的方法暴露出去
  defineExpose({
    printfunction
  })
</script>