Vue3工程示例

 

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>