Vue——组件传值2:(子向父传值的优化)

89 阅读1分钟

优化:

第一种:

1. 在父组件中的子组件标签中

<Box @event="fn" :a1="msg"></Box>简化成 <Box :a1.sync="msg"></Box>

2. 在子组件中触发事件中:

this.$emit("event","bejin")简化成 this.$emit("update:a1","beijin")

image.png

第二种(特例v-model=""v-value=""@input=""的结合):

  • v-model能实现双向绑定

  • v-model本质上是语法糖,它负责监听用户的输入事件以更新数据

  • v-model是内置指令,可以用在自定义组件上

  • 对input使用v-model,实际上是指定其:value和@input

image.png