父组件触发子组件方法

• template>
      <div>
          <Button @click="handleClick">点击调用子组件方法</Button>
          <Child ref="child"/>
      </div>
  </template>    
  
  <script>
  import Child from './child';
  
  export default {
      methods: {
          handleClick() {
                this.$refs.child.sing();
          },
      },
  }
  </script>
  
  
  //子组件中
  
  <template>
    <div>我是子组件</div>
  </template>
  <script>
  export default {
    methods: {
      sing() {
        console.log('我是子组件的方法');
      },
    },
  };
  </script>

  方案二：通过组件的$emit、$on方法；

  //父组件中
  
  <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>
  
  //子组件中
  
  <template>
      <div>我是子组件</div>
  </template>
  <script>
  export default {
      mounted() {
          this.$nextTick(function() {
              this.$on('childmethods', function() {
                  console.log('我是子组件方法');
              });
          });
       },
  };
  </script>
      

  vue3 中父组件调用子组件：点击跳转