Vue中父组件调用子组件的方法和子组件调用父组件方法

1：父组件调用子组件方法，通过$refs调用

//父组件中

<template>
    <div>
        <Child ref="child"/> 
    </div>
</template>    

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

export default {
    mounted(): {
       this.$refs.child.sing();
    },
}
</script>

注意要在注册的子组件中加一个ref值，然后通过$refs去调用

//子组件中

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

2：子组件调用父组件方法，通过$parent调用

  //父组件中

<template>
    <div>
        <Child/> 
    </div>
</template>    
<script>
import Child from './child';
export default {
    methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
    }
</script>

//子组件中

<template>
  <div>我是子组件</div>
</template>
<script>
export default {
      mounted(){
            this.$parent.fatherMethod()
        },
    };
    </script>