Vue3常用API用法

父组件

<template>
  <div>
    <h2>用户管理列表</h2>
    <h2>nameNumber {{ nameNumber("set") }}</h2>
 
    <el-row ref="myRow">
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item label="">
          <el-input
            @keyup.enter.native="selectClick"
            clearable
            v-model="nameWatch.test"
            maxlength="50"
            show-word-limit
            placeholder="请输入nameWatch"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            @keyup.enter.native="selectClick"
            clearable
            v-model="mobileNo"
            maxlength="50"
            show-word-limit
            placeholder="请输入手机号"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            @keyup.enter.native="selectClick"
            clearable
            v-model="name"
            maxlength="50"
            placeholder="请输入姓名"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="selectForm.selectValue"
            filterable
            clearable
            placeholder="是否选择"
            @change="selectClick"
          >
            <!--<el-option label="全部" :value="null"></el-option>-->
            <el-option
              v-for="(value, key, i) of selectArr"
              :key="i"
              :label="value"
              :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectClick">查 询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
 
    <el-table :data="tableDataTest" style="width: 100%">
      <el-table-column prop="date" label="Date" width="200" />
      <el-table-column prop="name" label="Name" width="300" />
      <el-table-column prop="address" label="Address" />
    </el-table>
 
    <el-pagination
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="50"
    />
 
    provideTemp.test:
    <el-input
      clearable
      v-model="provideTemp.test"
      maxlength="50"
      show-word-limit
      placeholder="请输入provideTemp.test"
    >
    </el-input>
    <!--子组件-->
    <son
      :mobileNo="mobileNo"
      :form="selectForm"
      :tableDataTest="tableDataTest"
      @sonClick="sonClickBy"
    />
 
    <!--弹框-->
    <button @click="dialogVisible = true">打开弹框 {{ dialogVisible }}</button>
    <DialogTest
      v-if="dialogVisible"
      v-model:dialogVisible="dialogVisible"
      @close="dialogVisible = false"
    />
  </div>
</template>
<script setup>
import son from "./son";
import DialogTest from "@/views/user/dialogTest";
import { queryPersonalUserInfoForPage } from "@/api/registUser";
import {
  onMounted,
  reactive,
  ref,
  toRefs,
  computed,
  toRef,
  watchEffect,
  watch,
  watchSyncEffect,
  watchPostEffect,
  provide,
  inject,
  nextTick,
  getCurrentInstance,
} from "vue";
 
 
const dialogVisible = ref(false)
 
 
const { proxy } = getCurrentInstance();
console.error("proxy--", proxy);
nextTick(()=>{
  proxy.$message.info("已取消删除-info")
 
  // proxy.$message({
  //   type: "info",
  //   message: "已取消删除",
  // });
 
  return
  proxy
    .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "error",
    })
    .then(async () => {
      proxy.$message({
        type: "success",
        message: "已确认删除",
      });
    })
    .catch(() => {
      proxy.$message({
        type: "info",
        message: "已取消删除",
      });
    });
})
 
 
// provide 传值方式 把值传给子组件
let provideTemp = reactive({
  test: "test",
});
provide("provideTemp", provideTemp);
 
const sonClickBy = (value) => {
  console.error("sonClickBy--value--", value);
  name.value = value;
};
 
/**
 * 搜索
 */
/*
 * ref 和 reactive的区别
 *
 * 1.reactive 接受入参必须是对象形式，而 ref 可以是对象形式，也可以是一个单值。
 * 2.ref 必须从.value 属性中读取值
 *
 *
 */
// ref 浅层次的响应式 一般用于定义基本数据类型
let name = ref("");
 
// reactive 让对象转为具有深层次响应式 一般用于定义复杂数据类型（json、数组）
let selectForm = reactive({
  mobileNo: "",
  selectValue: "",
});
 
let selectArr = ref({
  1: "测试1",
  2: "测试2",
  3: "测试3",
});
 
/*
 * toRef 和 toRefs 的区别
 *
 * 1.toRefs 只会为源对象中包含的 property 生成 ref,
 *   将对象转换为普通对象，且不丢失对源对象的响应式链接，
 *   即修改源对象属性值，生成的新的普通对象的对应属性值(ref)也会修改，反之亦然。
 * 2.toRef 为特定的 property 创建 ref, 同样也会保持响应式链接。
 * 3.toRef: 复制 reactive 里的单个属性并转成 ref
 *   toRefs: 复制 reactive 里的所有属性并转成 ref
 */
// toRefs 把object对象解构
const { mobileNo } = toRefs(selectForm);
let selectValueRef = toRef(selectForm, "selectValue");
const selectClick = () => {
  console.error("selectClick--请求接口--selectForm--", selectForm);
  console.error(
    "value--name--",
    name.value,
    selectForm.mobileNo,
    mobileNo.value,
    selectForm.selectValue
  );
  console.error("selectValueRef--", selectValueRef.value);
  getDataList([
    {
      date: "2022-09-09",
      name: "lyc-win-win-select",
      address: "China",
    },
  ]);
 
  // selectArr.value = {
  //   11:"测试111111",
  //   22:"测试222222",
  //   33:"测试333333"
  // }
};
 
// computed 计算属性使用
// const nameNumber = computed(() => mobileNo.value + name.value)
 
// const nameNumber = computed({
//   get:() => mobileNo.value + name.value,
//   set:(value) =>{
//     return value + mobileNo.value + name.value
//   }
// })
// computed 计算属性(传值)使用
const nameNumber = computed(() => (value) => {
  return value + mobileNo.value + name.value;
});
 
// watchEffect 监听使用
// 一般情况下使用默认的就行，除非是有什么特殊的要求，在选择post或者sync使用
// 取消监听，直接调用 watchEffectTemp()，watchEffect返回取消监听的方法
 
// flush: 'pre' 默认情况下，侦听器将在组件渲染之前执行
const watchEffectTemp = watchEffect(() => {
  let temp = selectForm;
  console.log("watchEffect--temp--", temp);
  console.log("watchEffect--name--", name.value);
  console.log("watchEffect--mobileNo--", mobileNo);
  console.log("watchEffect--selectValue--", selectForm.selectValue);
});
 
// flush: 'post' 将会使侦听器延迟到组件渲染之后再执行
const watchPostEffectTemp = watchPostEffect(() => {
  console.log("watchPostEffect--selectValue--", selectForm.selectValue);
});
 
// flush: 'sync' 在响应式依赖发生改变时立即触发侦听器
const watchSyncEffectTemp = watchSyncEffect(() => {
  console.log("watchSyncEffectTemp--selectValue--", selectForm.selectValue);
});
 
// watch 监听使用
let nameWatch = ref({
  test: "",
});
let tempWatch = watch(
  nameWatch,
  (newV, oldV) => {
    console.error("watch--name--", newV, oldV);
    getDataList([
      {
        date: "2022-09-09",
        name: "lyc-win-win-select-watch",
        address: "China",
      },
    ]);
  },
  {
    // immediate:true,
    deep: true,
  }
);
// setTimeout(()=>{
//   console.error("停止监听")
//   // 停止监听
//   tempWatch()
// }, 1000 * 10)
 
/**
 * 查询列表数据
 */
let tableDataTest = ref([]);
const getDataList = (value) => {
  console.error("请求接口--");
  // queryPersonalUserInfoForPage().then((res) => {
  //   console.error("res--", res);
  // });
  setTimeout(() => {
    name.value = "修改名字";
    selectForm.mobileNo = "修改手机号";
    // nameNumber.value = "test-set"
    // console.error("nameNumber--",nameNumber.value())
 
    // 引用计算属性并传值进去
    console.error(
      "22-引用计算属性并传值进去--nameNumber--",
      nameNumber.value("aa")
    );
 
    nameNumber.value = "testtest";
 
    tableDataTest.value = value || [
      {
        date: "2022-09-09",
        name: "lyc",
        address: "China",
      },
    ];
  }, 1000 * 2);
};
 
/**
 * 分页查询
 */
const currentChange = () => {
  getDataList([
    {
      date: "2022-09-09",
      name: "lyc-win-win",
      address: "China",
    },
  ]);
};
 
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom123",
    address: "No. 189, Grove St, Los Angeles",
  },
];
// 获取dom
const myRow = ref(null);
 
onMounted(() => {
  // 引用计算属性并传值进去
  console.error(
    "11-引用计算属性并传值进去--nameNumber--",
    nameNumber.value("aa")
  );
 
  tableDataTest.value = tableData;
  getDataList();
 
  // 获取dom
  console.error(
    "myRow-11-offsetWidth",
    myRow,
    myRow.value.$el.offsetWidth,
    myRow.value.$el.offsetHeight
  );
  console.error(
    "myRow-22-clientWidth",
    myRow,
    myRow.value.$el.clientWidth,
    myRow.value.$el.clientHeight
  );
  console.error(
    "myRow-$el-scrollWidth",
    myRow,
    myRow.value.$el.scrollWidth,
    myRow.value.$el.scrollHeight
  );
 
  console.error("proxy-onMounted-", proxy);
 
});
</script>

子组件

<template>
  <div>
    <h2>子组件</h2>
    <div>mobileNo:{{ mobileNo }}</div>
    <div>fomr:{{ form }}</div>
 
    <button @click="sonClick">点击给父组件传值1</button>
 
    <div>provideTemp:{{ provideTemp }}</div>
    <div>tableDataTest:{{ tableDataTest }}</div>
  </div>
</template>
 
<script setup>
import { inject } from "vue";
 
// props 传值方式
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: true,
  },
  mobileNo: {
    type: String,
    default: "",
  },
  form: {
    type: Object,
    default: null,
  },
  tableDataTest: {
    type: Object,
    default: null,
  },
});
 
// inject 接收父组件传过来的值
let provideTemp = inject("provideTemp"); // 调用
 
const emit = defineEmits();
const sonClick = () => {
  emit("sonClick", "sonClick-value");
};
</script>
 
<style scoped></style>

子组件 - 弹框

<template>
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeHandle">Cancel</el-button>
        <el-button type="primary" @click="closeHandle"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
import {
  onMounted,
  toRefs,
} from "vue";
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
})
 
const { dialogVisible } = toRefs(props)
const emit = defineEmits()
const closeHandle = ()=>{
  console.error("closeHandle回调")
  emit("update:dialogVisible", false)
}
 
onMounted(()=>{
  console.error("onMounted -- dialogTest.vue--",dialogVisible.value)
})
</script>
 
<style scoped>
 
</style>