vue中使用$emit子组件给父组件传参以及使用ref和$refs父组件调用子组件方法

$emit子组件给父组件传参

1.子组件不传递参数，父组件也不接受参数

// 子组件
<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、 子组件传递一个参数，父组件接收时不带形参

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