父组件中定义index变量,子组件需要这个变量,并且会更改;
但是 众所周知。vue是单向数据流, 子组件是不能修改父组件的参数的;唯一的方法,就是通过emit,通过父类修改变量,从而修改子类里面的prop值的参数
vue3中支持一个组件可以传递子组件很多双向绑定的参数,即通过v-model: 变量名。来设置;
下面 是简单实用
父组件中:
<role-list
v-model:activeIndex="activeIndex"
/>
子组件
const props = defineProps<{
activeIndex: number;
}>();
type EmitType = {
(e: 'update:activeIndex', index: number): void;
};
const emit = defineEmits<EmitType>();
// 在需要更改的地方 emit这个方法 即可
const changeRole = (index: number) => {
emit('update:activeIndex', index);
};