Vue3在script setup标签中进行父子组件的通信

父组件

在父组件中定义添加和删除函数，并且传递给子组件

<div>
     <Input @add="handleAdd" />
     <List :list="state.list" @delete="handleDelete" />
</div>

<script setup>
import Input from './Input.vue';
import List from './List.vue'
import { reactive } from 'vue';

//这里定义响应式数组的时候要注意要定义在reactive内部，不然直接修改list后就会失去响应式
const state = reactive({
    list:[
    {
        id: '1',
        title: '标题1'
    },
    {
        id: '2',
        title: '标题2'
    },
]
});
//通过state.list添加数据
const handleAdd = (title) => {
    state.list.push({
        id: `id-${Date.now()}`,
        title
    })
}

const handleDelete = (id) => {
    state.list = state.list.filter(item => item.id !== id)
}

</script>

子组件

Input.vue

<input type="text" v-model="title" id="input1" @keyup.enter.native = addTitle>
<button class="plus" @click=addTitle>add</button>

<script setup>
import { ref } from 'vue'

const title = ref('')
//通过difineEmits获取add函数，并向父组件传值
const emit = defineEmits(['add'])
const addTitle = () => {
    emit('add', title.value);
    title.value = '';
}

defineExpose({
    title,
    deleteLi
})
</script>

List.vue

<ul>
   <li v-for="item in props.list" :key="item.id">{{ item.title }}
       <button @click="deleteLi(item.id)">delete</button>
   </li>
</ul>

//在script setup标签中props变更为了defineProps
const props = defineProps({
    list: {
        type: Array,
        default() {
            return []
        }
    }
})
const emit = defineEmits(['delete'])
const deleteLi = (id) => {
    emit('delete', id)
}
//将函数暴露出来
defineExpose({
    deleteLi,
})