vue3组件通信

1. Props方式

父组件以数据绑定的形式声明要传递的数据，子组件通过defineProperty()方法创建props对象，即可拿到父组件传来的数据

父组件

<child :list="list"></child>

子组件

<template>
  <ul>
    <li v-for="i in props.list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  list: {
    type: Array,       //类型
    default: () => [], //默认
  },
})
</script>

2. emit方式

父组件

<child @clickList="clickList" :list="list"></child>
<script setup>
  import {ref} from 'vue'
 const list = ref([1,2,3,4])
 const clickList= (value) => {
     console.log('子组件点击传过来的值',value);
}
</script>

子组件

<template>
  <ul>
    <li v-for="i in props.list" :key="i" @click="clickListFun(i)">{{ i }}</li>
  </ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  list: {
    type: Array,       //类型
    default: () => [], //默认
  },
})

//点击向父组件通信 传值
const emits = defineEmits(['clickList'])
const clickListFun = (value) => {
    emits('clickList', value)
}

</script>