正能量网站不用下载直接进入,企业网站制作流程图,wordpress导入有道笔记,深圳网站建设公司熊掌号vue组件含有v-model的props,当对其进行封装,想对该属性进行双向绑定时,可以采用computed的方式包一层get(){return props.xxx},set(v){emit(update:xxx,v)},或者使用vueuse的useModel来深层代理,但是只适合要封装的组件prop的内部的变量数据类型一致,不一致就只能拆开写,通…vue组件含有v-model的props,当对其进行封装,想对该属性进行双向绑定时,可以采用computed的方式包一层get(){return props.xxx},set(v){emit(update:xxx,v)},或者使用vueuse的useModel来深层代理,但是只适合要封装的组件prop的内部的变量数据类型一致,不一致就只能拆开写,通过watch监听prop更新内部变量, 然后内部变量在内部的v-model变化时抛出事件通知父组件. father.vue
templatedivChild v-model:form-stateobj changeonChange/Child/div
/templatescript setup
import { ref } from vue;
import Child from ./Child.vue;const obj ref({test: xihu
});const onChange state {console.log(父组件监听, state);
};
/scriptstyle langless scoped/style
Child.vue
templatediva-form :model_formStatea-form-item labeltewsta-cascaderv-model:value_formState.test:optionsoptionsplaceholderPlease select//a-form-item/a-form/div
/templatescript 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}
);
/scriptstyle langless scoped/style
