Test1.vue
<template> <div class="test1"> <h1>This is a test1 page</h1> <Test1Top></Test1Top> <Test1Center></Test1Center> <Test1Bottom></Test1Bottom> </div> </template> <script> import Test1Top from "../components/Test1Top"; import Test1Center from "../components/Test1Center"; import Test1Bottom from "../components/Test1Bottom" import {provide, reactive} from "vue"; export default { setup(){ //定义数据 let persons = reactive([ {id:1,name:"张三",age:24,selected:false}, {id:2,name:"李四",age:27,selected:false}, {id:3,name:"王五",age:30,selected:false} ]); //提供给子组件使用的方法 // 根据索引删除记录 const delPersonWithIndex = (index)=>{ persons.splice(index,1); } const addPerson = (person)=>{ persons.unshift(person); } const selectedAllPerson = (isChecked)=>{ persons.forEach((person)=>{ // console.log() person.selected = isChecked; }); } const delCheckedPersons = ()=>{ persons = persons.filter((person)=>{ return !person.selected; }) } //发布 provide('persons',persons) provide('delPersonWithIndex',delPersonWithIndex) provide('addPerson',addPerson) provide('selectedAllPerson',selectedAllPerson) provide('delCheckedPersons',delCheckedPersons) }, components: { Test1Top, Test1Bottom, Test1Center } } </script>
Test1Top.vue
<template> <div> Test1Top <input type="text" placeholder="请输入name" v-model.trim="name" @keyup.enter="add_person"> </div> </template> <script setup> import {inject, ref} from 'vue'; //订阅添加方法 const addPerson = inject('addPerson'); //定义属性和方法 let name = ref(''); let add_person = ()=>{ const p_name = name.value; if(!p_name){ alert("name must not null"); return; } let person = {id:'',name:p_name,age:30,selected:false}; addPerson(person); name.value = ''; } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
Test1Bottom.vue
<template> <div> Test1Bottom <span> 共{{ persons.length }}条 已选{{}}条</span> <button @click="delCheckedPersons">删除选中数据</button> </div> </template> <script setup> import {inject} from 'vue'; //订阅 const persons = inject('persons') const delCheckedPersons = inject('delCheckedPersons') </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
Test1Center.vue
<template> <div> Test1Center <div> <table border="1px;" width="80%;"> <tr> <th><input type="checkbox"></th> <th>id</th> <th>name</th> <th>age</th> <th>操作</th> </tr> <Test1Item v-for="(person,index) in persons" :key="person.id" :person="person" :index="index"></Test1Item> </table> </div> </div> </template> <script> import Test1Item from './Test1Item.vue'; import {inject} from 'vue'; export default { name: 'Test1Center', setup(){ //订阅persons const persons = inject('persons'); const selectedAllPerson = inject('selectedAllPerson'); return{ persons, selectedAllPerson } }, components: { Test1Item } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
Test1Item.vue
<template> <tr @mouseenter="dealShow(true)" @mouseleave="dealShow(false)" :style="{backgroundColor:bgColor}"> <td><input type="checkbox"/></td> <td>{{person.id}}</td> <td>{{person.name}}</td> <td>{{person.age}}</td> <td> <button v-show="isShowDelBtn" @click="delItem">删除</button> </td> </tr> </template> <script> import {inject, ref} from 'vue'; export default { name: 'Test1Item', // setup(props,context){ setup(props){ // 订阅删除方法 const delPerson = inject('delPersonWithIndex'); // const delPerson = inject('delPerson'); //定义属性和方法 let isShowDelBtn = ref(false); let bgColor = ref('#fff'); const dealShow = (isShow)=>{ // 控制按钮的显示和隐藏 isShowDelBtn.value=isShow; bgColor.value=isShow? '#ddd':'#fff'; } const delItem = ()=>{ if(window.confirm('del confirm?')){ console.log(props); delPerson(props.index); } } return{ isShowDelBtn, bgColor, dealShow, delItem } }, props:{ person:Object, index:Number, delPerson:Function }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>