前端培训丁鹿学堂：vue基础之v-model使用详情

组件事件传递之emit

1. 父组件给子组件传递事件，可以是click等事件或者自定义事件

// ===
 methods:{
  del(data){
     console.log(data)
  }
}
1
2
3
4
5
6
7

2.子组件通过emits注册

export default {
  emits:['del'],
}
1
2
3

3.子组件通过$emit触发，并且可以传参数

 {{content}}
1

v-model的实现

input输入框的v-model是vue 的语法糖。实际是由value 属性和input事件组合而成的
分解：
input输入框 的input事件中有一个事件对象$envet,他上面的target.value 就是input的输入的内容

1

组件传值使用v-model语法糖

父子组件可以通过v-model实现双向通信。

1.子组件设 modelValue为props属性，并且不主动改变 modelValue值.这里的modelValue是vue3规定的，只能使用这个才能简写

2.子组件通过 this.$emit(‘update:modelValue’, ‘xxx’) 将xxx 值传给父组件 ，这里update:modelValue也是固定的

3.父组件通过 v-model=“localValue” 绑定一个本地变量，即可实现。

4.如果不起名为modelValue， 则都要做相应改变，父组件的v-model 应写为 v-model:xxx

1

语法糖传值--{{value}}
// =====
 props:['value'],
methods:{
   handle(){
     this.$emit('update:modelValue',123)
  }
}
1
2
3
4
5
6
7
8