vue组件prop变量和内部变量数据格式不一样时,变量同步prop值,变量改变通知父组件.
2023-12-21 06:17:34
vue组件含有v-model的props,当对其进行封装,想对该属性进行双向绑定时,可以采用computed的方式包一层get(){return props.xxx},set(v)=>{emit('update:xxx',v)}
,或者使用vueuse
的useModel
来深层代理,但是只适合要封装的组件prop的内部的变量数据类型一致,不一致就只能拆开写,通过watch
监听prop
更新内部变量, 然后内部变量在内部的v-model
变化时抛出事件通知父组件.
father.vue
<template>
<div>
<Child v-model:form-state="obj" @change="onChange"></Child>
</div>
</template>
<script setup>
import { ref } from "vue";
import Child from "./Child.vue";
const obj = ref({
test: "xihu"
});
const onChange = state => {
console.log("父组件监听", state);
};
</script>
<style lang="less" scoped></style>
Child.vue
<template>
<div>
<a-form :model="_formState">
<a-form-item label="tewst">
<a-cascader
v-model:value="_formState.test"
:options="options"
placeholder="Please select"
/>
</a-form-item>
</a-form>
</div>
</template>
<script setup>
import { ref, watch } from "vue";
import { cloneDeep } from "lodash-es";
const props = defineProps({
formState: {
type: Object,
default: () => ({ test: "" })
},
transform: {
type: Function
}
});
const emit = defineEmits(["change", "update:formState"]);
const _formState = ref({
test: []
});
const options = [
{
value: "zhejiang",
label: "Zhejiang",
children: [
{
value: "hangzhou",
label: "Hangzhou",
children: [
{
value: "xihu",
label: "West Lake"
}
]
}
]
},
{
value: "jiangsu",
label: "Jiangsu",
children: [
{
value: "nanjing",
label: "Nanjing",
children: [
{
value: "zhonghuamen",
label: "Zhong Hua Men"
}
]
}
]
}
];
watch(
() => props.formState,
v => {
const findPathById = (treeArr, id) => {
const path = [];
let isFind = false;
const traverse = nodes => {
if (!Array.isArray(nodes)) return;
for (const node of nodes) {
if (isFind) return;
const { value, children } = node;
path.push(value);
if (value == id) {
isFind = true;
return;
}
if (children && children.length) {
traverse(children);
}
if (!isFind) {
path.pop();
}
}
};
traverse(treeArr);
return path;
};
if (props.formState && props.formState.test) {
_formState.value.test = findPathById(options, props.formState?.test);
}
},
{
immediate: true
}
);
watch(
() => _formState.value,
newState => {
emit("change", newState);
// ? emit("update:formState",newState) 这里如果进行双向绑定,会触发上面的watch无限循环
},
{
deep: true,
immediate: true
}
);
</script>
<style lang="less" scoped></style>
文章来源:https://blog.csdn.net/qq_42372534/article/details/135120793
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!