父组件
<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>