vue中父组件调用子组件的方法

方法一：通过ref直接调用子组件的方法；

// 父组件中

<template>
    <div>
        <Button @click="handleClick">调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

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

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


//子组件中

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

方法二：通过$Children调用子组件方法

// 父组件中

<template>
    <div>
        <Button @click="handleClick">调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

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

export default {
    methods: {
        handleClick() {
              this.$children[0].cfun();   // 注意: $children不保证顺序，
        },
    },
}
</script>


//子组件中

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