• 一、父元件中引入子元件
• 二、父元件中呼叫子元件的方法
  • 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>