vue中父元件調用子元件的方法

通過ref直接調用子元件的方法,this.$refs.child.fun()

父元件.js

// 父元件中
<template>
    <div>
        <Button @click="handleClick">點選調用子元件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

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

export default {
    methods: {
        handleClick() {
              this.$refs.child.fun();
        },
    },
}
</script>
           

子元件.js

//子元件中

<template>
  <div>我是子元件</div>
</template>
<script>
export default {
  methods: {
    fun() {
      console.log('這是是子元件的方法');
    },
  },
};
</script>