Vue3.4及以后版本，出现了一个defineModel()宏

Question

老师，我在学这节课的时候，我去官网看了下，发现官网现在推荐defineModel()方法
但是看了下文档，没整明白怎么用到当前这节课中，不知道怎么改写，搜了下百度，都是很简单的传基础类型的值，
咱们这节课传的是对象类型（openedValue和accordion两个字段），有点不知道怎么改写，可以麻烦老师根据这节课帮忙解惑一下吗，谢谢！

Answer 1

张轩 2024-05-11 09:37:26

同学你好 抱歉看到回复有些晚了

这里其实就是一个新出的语法糖，

https://vuejs.org/guide/components/v-model.html#under-the-hood

可以将两个逻辑写在一起。我们这里的只需要简单修改就好：

// 原来其实是这么两行代码
const activeNames = ref<NameType[]>(props.modelValue)
emits('update:modelValue', _activeNames)
// 现在只需要一行代替, 然后就可以了，在修改这个值的时候它会自动发射对应的事件
const activeNames = defineModel<NameType[]>()

• aliezzzz #1

  顺便改成definemodel以后，也不需要再去watch了

• 慕设计0021481 #2

  张老师：
           你好，我是这样写的，测试运行没问题，规范性和优化上，还得请老师看看还有啥改的地方吗？
  
  export interface CollapseEmits {
    (e: 'change', values: NameType[]): void
  }
  
  export interface CollapseContext {
    activeNames: ModelRef<NameType[]>
    handleItemClick: (name: NameType) => void
  }
  
  // Collapse.vue
  const activeNames = defineModel<NameType[]>() as ModelRef<NameType[]>
  
  const handleItemClick = (item: NameType) => {
    const index = activeNames?.value.indexOf(item)
    if (index > -1) {
      activeNames.value.splice(index, 1)
    } else {
      activeNames.value.push(item)
    }
    emits('change', activeNames.value)
  }

• 张轩 回复 慕设计0021481 #3

  这个 as ModelRef<NameType[]> 有必要吗？我感觉这个是可以自动推论出来的啊

点开查看后面4条评论

Answer 2

张轩 2024-05-01 09:00:52

同学你好

好的，我今天晚点的时候给你提供一段代码，让你参考一下。

• 提问者 qq_慕圣1562754 #1

  好的，麻烦老师了，再次感谢！

• 提问者 qq_慕圣1562754 #2

  老师什么时候方便能让我参考一下哇 🙇‍

• 慕设计0021481 #3

  请老师看看！