<!-- 子组件 -->
<template>
    <div>
        <button @click="emitSomeThing">发送</button>
    </div>
</template>
<script>
export default {
    methods: {
        emitSomeThing() {
            this.$emit('change', '子组件传递的数据')
        }
    }
}
</script>
<!-- 父组件 -->
<template>
    <div>
        <Child @change="onChange"></Child>
    </div>
</template>
<script>
export default {
    methods: {
        // 接收子组件传递的数据
        onChange(event) {
            console.log(event) 
        }
    }
}
</script>

<!-- 父组件 -->
<template>
    <div>
        <Child :list="list"></Child>
    </div>
</template>
<script>
export default {
    data(){
        return {
            list: [1, 2, 3]
        }
    }
}
</script>
<!-- 子组件 -->
<template>
    <div>
        <span v-for="item in list" :key="item">{{item}}</span>
    </div>
</template>
<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    mounted() {
        console.log(this.list)
    }
}
</script>

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in childRefs?.list" :key="i">
      {{ i }}
    </li>
  </ul>
  <!-- The value of the child component ref is the same as that in the <script> -->
  <child-components ref="childRefs"></child-components>
  <!-- parent component -->
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const childRefs = ref(null)
</script>