当前位置：首页 > news >正文

将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3（组件传值）

news 2025/2/6 23:29:35

封装组件看这个，然后理解父子组件传值

应用场景：

1.使用`v - model`语法实现双向绑定（传值两边都不用定义方法接数据）

1.子组件

1. @update:modelValue事件是MultiSelect组件对象自带的事件

2.:options="countries"

options是MultiSelect对象自带的可以接受自定义值的属性

countries是我们封装的接受外部自定义值的属性。。引用关系有点复杂

3.代码

<template><div class="card flex justify-center"><MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" @update:modelValue="$emit('update:selectedCountries',selectedCountries)" filter placeholder="Select Countries" display="chip" class="w-full md:w-80"><template #option="slotProps"><div class="flex items-center"><div>{{ slotProps.option.name }}</div></div></template><template #dropdownicon><i class="pi pi-map" /></template><template #filtericon><i class="pi pi-map-marker" /></template><template #header><div class="font-medium px-3 py-2">Available Countries</div></template><template #footer><div class="p-3 flex justify-between"><Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" /><Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" /></div></template></MultiSelect></div>
</template><script setup>
import {onMounted, ref} from "vue";
// import { MultiSelect } from 'primevue/multiselect';
// import { Button } from 'primevue/button';const props = defineProps({// 可以添加自定义的props，例如是否禁用组件等disabled: {type: Boolean,default: false},countries:{type: Array,required: true},selectedCountries:{type: Array,},visible:{type: Boolean,default: false}});const selectedCountries = ref([])
// 如果需要根据父组件传入的值改变内部数据结构，可以在这里处理
// 例如：
// if (props.someValue) {
//     // 对countries或者selectedCountries进行操作
// }// 可以定义内部的方法，如果需要暴露给父组件，可以使用emits
const emit = defineEmits(['update:selectedCountries']);
const emitModelValueChange = () => {emit('update:modelValue', selectedCountries);
};
</script>

2.父组件

1.selectedCountries这个变量我们没有在父组件里定义，这个是跟在事件之后的参数，也是我们要传的值

2.selectedUsers这个变量就是父组件所属的了

3.界面效果

2.手动实现双向绑定（不使用`v - model`语法的传统方式）（传值两边都需要定义方法接数据）

1.子组件

<template><div class="card flex justify-center">
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" @update:modelValue="emitModelValueChange" filter placeholder="Select Countries" display="chip" class="w-full md:w-80"><template #option="slotProps"><div class="flex items-center"><div>{{ slotProps.option.name }}</div></div></template><template #dropdownicon><i class="pi pi-map" /></template><template #filtericon><i class="pi pi-map-marker" /></template><template #header><div class="font-medium px-3 py-2">Available Countries</div></template><template #footer><div class="p-3 flex justify-between"><Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" /><Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" /></div></template></MultiSelect></div>
</template><script setup>
import {onMounted, ref} from "vue";
// import { MultiSelect } from 'primevue/multiselect';
// import { Button } from 'primevue/button';const props = defineProps({// 可以添加自定义的props，例如是否禁用组件等disabled: {type: Boolean,default: false},countries:{type: Array,required: true},selectedCountries:{type: Array,},visible:{type: Boolean,default: false}});const selectedCountries = ref([])
// 如果需要根据父组件传入的值改变内部数据结构，可以在这里处理
// 例如：
// if (props.someValue) {
//     // 对countries或者selectedCountries进行操作
// }// 可以定义内部的方法，如果需要暴露给父组件，可以使用emits//updateSelectedCountries名字随便，爱叫是什么叫什么，只要统一就行const emit = defineEmits(['updateSelectedCountries']);
const emitModelValueChange = () => {emit('updateSelectedCountries', selectedCountries);
};
</script>