个人学习Vue3的一些总结

子组件传递参数以及接收参数

    <template>
      <p>{{ props.msg2 }}</p>
      <button @click="showToast" class="btn">打开 toast</button>
      <!-- to 属性就是目标位置 -->
      <teleport to="#teleport-target">
        <div v-if="visible" class="toast-wrap">
          <div class="toast-msg"></div>
        </div>
      </teleport>
    </template>

    <script setup lang="ts">
      import { getCurrentInstance, inject, watch, ref } from 'vue'; // 子组件
      const instance = getCurrentInstance()
      const _this = instance.appContext.config.globalProperties // 获取全局对象\
      const name = inject('name') // inject深入传递子组件
      const props = defineProps({
        // props写法不需要引入
        msg1: String,
        msg2: {
          type:String,
          default:""
        }
      })
      console.log(props);
      watch(name, (newValue, oldValue) => {
        console.log(name.value)
      })
      // toast 的封装
      const visible = ref(false);
      let timer;
      const showToast = () => {
        visible.value = true;
        // clearTimeout(timer);
        // timer = setTimeout(() => {
        //   visible.value = false;
        // }, 2000);
      }
    </script>

    <style>

    </style>

父组件传递参数

    <template>
      <div class="box">
        <echart :option="picOptions" :id="'qweq-111'" :height="800"/>
        <emit :msg2="name" @myClick="myClick"></emit>
      </div>
    </template>

    <script setup lang="ts">
      import { defineAsyncComponent, ref, provide } from 'vue'; // 父组件
      import { picOption } from './config.js'
      const picOptions = ref(picOption)
      const emit = defineAsyncComponent(() => import('../../components/edit/index.vue'))
      const name = ref('1111')
      // const foo = Symbol('foo') // 这个方法有个bug就是 配套的多个组件同时使用实例不能只用一个key，每个实例要有不一样的key，否则会被最后调用provide方法覆盖掉
      // const bar = Symbol('foo') // 需要用Symbol()
      // console.log(foo === bar);
      provide('name', name)
      const myClick = (value: boolean) => {
        console.log(value);
      }
    </script>

    <style scoped>
      .box {
        width: 100%;
        height: 800px;
      }
    </style>

使用类似react中的hooks，按模块划分

    <template> // List.vue
      <el-table :data="tableData" style="width: 100%" class="list-table">
        <el-table-column label="标题" width="180">
          <template #default="scope">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="180">
          <template #default="scope">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >Edit</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <script setup lang="ts">
      import { ref, watch } from "vue";
      import usetableHooks from './List/table' // 每个模块有自己的关系，方便维护
      const { tableData, handleEdit, handleDelete } = usetableHooks()
      // watch监听多个方法
      // watch(() => [state.province, state.country], ([newprovince,newcountry],[oldprovince,oldcountry]) => {})
    </script>

    <style>
      .el-main {
        line-height: 40px;
      }
    </style>
    

    import { reactive } from "vue"; // table.ts
    export default function usetableHooks() {
        const tableData = reactive([
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ])
        const handleEdit = (index: number, row: any) => {
            console.log(index, row)
        }
        const handleDelete = (index: number, row: any) => {
            console.log(index, row)
        }
        return {
            tableData,
            handleEdit,
            handleDelete,
        };
    }