Em vue, use o componente filho $emit para passar parâmetros para o componente pai e use o componente pai ref e $refs para chamar o método do componente filho

O componente filho $emit passa parâmetros para o componente pai

1. Os subcomponentes não passam parâmetros e os componentes pais não aceitam parâmetros

// 子组件
<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
    
    
  name: 'Children',
  components: {
    
    },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    testEmit() {
    
    
      this.$emit('test')
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <children @test="test" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
    
    
  name: 'Father',
  components: {
    
     children },
  methods: {
    
    
    test() {
    
    
      console.log('test');
    }
  }
}
</script>

2. O componente filho passa um parâmetro e o componente pai o recebe sem parâmetros formais

<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
    
    
  name: 'Children',
  components: {
    
    },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    testEmit() {
    
    
      this.$emit('test', 'this is children')
    }
  }
}
</script>

<template>
  <div>
    <children @test="test" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
    
    
  name: 'Father',
  components: {
    
     children },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    test(val) {
    
    
      console.log(val); //this is children
    }
  }
}
</script>

3. O componente filho passa vários parâmetros, que precisam ser usados arguments​​como parâmetros formais quando o componente pai os recebe. argumentos é uma matriz .

<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
    
    
  name: 'Children',
  components: {
    
    },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    testEmit() {
    
    
      this.$emit('test', 'this is children1', 'this is children2')
    }
  }
}
</script>

<template>
  <div>
    <children @test="test(arguments)" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
    
    
  name: 'Father',
  components: {
    
     children },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    test(val) {
    
    
      console.log(val); // Arguments { 0: "this is children1", 1: "this is children2"}
      console.log(val[0]); // this is children1
      console.log(val[1]); // this is children2
    }
  }
}
</script>

4. O componente filho passa um parâmetro, e o componente pai também adiciona uma propriedade própria ao receber o parâmetro, então o componente pai precisa usar um parâmetro formal $eventpara substituir o parâmetro passado pelo componente filho.

<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
    
    
  name: 'Children',
  components: {
    
    },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    testEmit() {
    
    
      this.$emit('test', 'this is children')
    }
  }
}
</script>

<template>
  <div>
    <children @test="test($event, 'father')" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
    
    
  name: 'Father',
  components: {
    
     children },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    test(childParam, fatherParam) {
    
    
      console.log(childParam); // this is children
      console.log(fatherParam); // father
    }
  }
}
</script>

5. Quando o componente filho passa vários parâmetros, o componente pai também adiciona uma propriedade própria ao receber os parâmetros, então o componente pai precisa usar parâmetros formais para argumentssubstituir os vários parâmetros passados ​​pelo componente filho.

<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
    
    
  name: 'Children',
  components: {
    
    },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    testEmit() {
    
    
      this.$emit('test', 'this is children1', 'this is children2')
    }
  }
}
</script>

<template>
  <div>
    <children @test="test(arguments, 'father')" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
    
    
  name: 'Father',
  components: {
    
     children },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    test(childParam, fatherParam) {
    
    
      console.log(childParam); // Arguments { 0: "this is children1", 1: "this is children2"}
      console.log(childParam[0]); // this is children1
      console.log(childParam[1]); // this is children2
      console.log(fatherParam); // father 

    }
  }
}
</script>

componente pai ref e $refs chama o método do componente filho

<template>
  <div>
    <children ref="childRef" />
    <jc-button @click="test">click</jc-button>
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
    
    
  name: 'Father',
  components: {
    
     children },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    test() {
    
    
      this.$refs.childRef.testRef() // this is child
    }
  }
}
</script>

<template>
  <div>
    child
  </div>
</template>
<script>
export default {
    
    
  name: 'Children',
  components: {
    
    },
  props: {
    
    },
  data() {
    
    
    return {
    
    }
  },
  methods: {
    
    
    testRef() {
    
    
      console.log('this is child');
    }
  }
}
</script>