父组件

<template lang="">
  <div>
    <div class="greetings">按钮值：{{ num }}</div>
    <div>
      <button @click="num++">按钮</button>
    </div>

    <div> i am parent</div>
    <button @click="addList">list新增</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
    <Child :list="list"></Child>
  </div>
</template>
<script>
export default {};
</script>
<script setup>
import { ref } from "vue";
import Child from './Child.vue'
const num = ref(0);
const list = ref([
  '标题1', '标题2'
])
let i = 2;
const addList = () => {
  list.value.push('标题' + ++i)
}
</script>
<style lang=""></style>

子组件

<template lang="">
  <div>
    <p>i am child</p>
    <ul>
      <li v-for="item in props.list">{{item}}</li>
    </ul>
    <button @click='deleteOne'>删除list</button>
  </div>
</template>
<script>
export default {};
</script>

<script setup>
const a = 1;
const props = defineProps(['list'])
console.log('获取到的props', props)
console.log('获取到的props.list', props.list)
// console.log(list)
// const list = ref(['2123'])
const deleteOne = () => {
  let list = props.list 
  list.splice(0, 1)
}
</script>
<style lang=""></style>

最终效果

初始

点击父组件新增

点击子组件删除