• 我在一个组件引入 Switch 子组件时，发现外界无法知道当前状态是开还是关，并且外界无法输入最开始的状态。

怎么办？

• 添加 value 属性，添加 input 事件

<Switch :value="xxx" @input="xxx = $event" />

• 用 props 让 Switch 子组件可以接受到 value

• 用 context.emit('input', yyy) 让 Switch 发出 input 事件， yyy 为最新的值，它会被当做 $event

补充：Vue3 新版 v-model 用法

• v-model 对“父子间的数据交流”进行简化，这里有一篇我之前写文章 随笔记： v-model

• 首先,不能叫做“input”事件，要跟 props 的名字对应，比如上面代码的 'input'事件只能叫做'update:value'事件

• 继续简化，把@update:value="xxx = $event "删掉，在:value前加 v-model 变成v-model:value，等同于原来的代码。

总结

使用 v-model 极大简化了父子组件间的数据交流

• 要求：
  属性名任意，假设为 x ；
  事件名必须为”update:x”
• 效果：
  <Switch:value="y" @update:value="y = $event"/> 简写为<Switch v-model:value="y"/>
• 这是 Vue2 到 Vue3 的一个大变动，新的 v-model 代替了以前的 v-model 和 .sync

Vue2 和 Vue3 还有一个区别就是 Vue3 新增了 context.emit，作用与 this.$emit相同。

• 区别：

  在setup(){}内用context.emit。

  在setup(){}内不能用this.$emit，因为这个 this 不是当前实例，但可以在methods:{}内用。