vue3 增删改查 未完待续~~~~

需要做个增删改查的页面 

在子页面写好 进行确认  在父页面 需要再点一下添加  过程有点麻烦  有时间优化一下啊

删除正常删就可以了

效果展示

父页面

<template>
  <div>
 
    <!-- //展示添加出来的名称 可以观察是否添加上 -->
    <div class="item" v-for="item in price" :key="item">
      {{ item.name }}
    </div>
 
    <!-- //定义标签名称 -->
    <div class="from">
      <span class="from-span">姓名：</span>
      <span class="from-span">代号：</span>
      <span class="from-span">年纪：</span>
      <span class="from-span">职务：</span>
      <span class="from-span">生日: </span>
    </div>
 
     <!-- //渲染数据 -->
    <div class="from" v-for:="(item, index) in price">
      <span class="from-span-n">{{ item.name }}</span>
      <span class="from-span-n">{{ item.number }}</span>
      <span class="from-span-n">{{ item.age }}</span>
      <span class="from-span-n">{{ item.post }}</span>
      <span class="from-span-n">{{ item.time }}</span>
      <button @click="del()">删除</button>
    </div>
 
     <!-- //定义按钮  添加 -->
    <button @click="add()">添加</button>
 
    <!-- //子标签 -->
    <Demo @change="changep" ></Demo>
  </div>
</template>
 
<script>
import { reactive, ref, onMounted ,watch ,computed} from "vue";
import Demo from '../src/views/src/demo.vue'
export default {
  name: "App",
  components: {
    Demo,
  },
  // props 占位  解构 emit  ctx 代替this指向
  setup(props, { emit }, ctx) {
    
    // 父组件默认值  定义默认值进行渲染
    const price = reactive([
      {
        name: '农夫山泉',
        age: "1.2",
        number: "201300001",
        post: '阿金',
        time: "2013-01-07",
 
      },
      {
        name: '百岁山',
        age: "3.5",
        number: "201300002",
        post: '阿心',
        time: "2014-09-21",
 
      },
      {
        name: '棒棒糖',
        age: "1.5",
        number: "201300003",
        post: '阿sas',
        time: "2015-02-01",
 
      },
      {
        name: '冰激凌',
        age: "8",
        number: "201300004",
        post: '阿sazzs',
        time: "2019-06-13",
 
      },
      {
        name: '蛋糕',
        age: "66",
        number: "201300005",
        post: '阿saszzz',
        time: "2021-11-12",
 
      },
    ]);
 
    // 文本框双向绑定的值  
    const title = reactive({ name: "", age: "", number: "", post: "", time: "", keyword: '', });
 
 
    // 添加
    function add() {
      console.log('添加')
      // 定义对象，存储从文本框获取到的数据
      const addArray = {
        name: price.name,
        age: price.age,
        number: price.number,
        post: price.post,
        time: price.time,
      }
      // push方法，添加一条数据到初始数据的数组中
      price.push(addArray);
    }
 
 
    // 删除
    function del(index) {
      console.log('删除')
      // splice方法，删除
      price.splice(index, 1)
    }
 
   //子组件传来的 切换 父组件的默认值
    function changep(e) {
       console.log(e, "切换传值") 
       price.name= e.name
       price.age= e.age 
       price.number= e.number 
       price.post= e.post
       price.time= e.time
    };
 
    return {
      title,
      price,
      del,
      changep,
      add
      
 
    }
  }
}
</script>
 
<style>
.from {
   width: 1000px;
   margin: 30px;
   font-size: 20px;
   display: flex;
   justify-content: space-around;
 }
 
 .from-span {
   height: 26px;
   width: 937px;
   border-style: solid;
   border-color: rgb(0, 0, 0);
   border-width: 3px;
 }
 
 .from-span-n {
   /* 边框 */
   height: 26px;
   width: 937px;
   border-style: solid;
   border-color: rgb(91, 91, 91);
   border-width: 3px;
   /* 三个点 消失 */
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   width: 90%;
 }
</style>

子页面

<template>
  <div class="skl">
    <h1>信息表单</h1>
    <!-- 定义input 框的内容 -->
    姓名：<input type="text" placeholder="姓名" v-model="propsa.name">
    <br>
    代号：<input type="text" placeholder="代号" v-model="propsa.number">
    <br>
    年纪：<input type="text" placeholder="年纪" v-model="propsa.age">
    <br>
    职务：<input type="text" placeholder="职务" v-model="propsa.post">
    <br>
    生日：<input type="text" placeholder="生日" v-model="propsa.time">
    <br>

    <!-- 子页面的确认按钮 -->
    <button @click="changParent">确定</button>
  </div>
</template>
        
<script>
import { reactive } from '@vue/reactivity';
export default {
  name: "Demo",
  // 接收值

  // props 占位  解构 emit 
  setup(props, { emit }) {

    // 定义 子页面的默认值 （为了方便观看）
    const propsa = reactive({
      name: '阿金',
      age: "12",
      number: '007',
      post: '程序员',
      time: '2000.4.24'
    })

    // 定义方法传值
    function changParent() {
      emit("change", propsa);
    };

    return {
      changParent,
      propsa,
    };
  },
}
</script>
<style>
.skl {
  width: 100%;
  height: 340px;
  background-color: blanchedalmond;
}
</style>
      

阿金只做了 增删  改查 还没来得及做  脑壳痛~~~~~~~~~~