丁鹿学堂前端培训:vue基础之v-model

组件事件传递之emit

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

<Dbutton :content = "content" @del="del"/>
// ===
 methods:{
  del(data){
     console.log(data)
  }
}

2.子组件通过emits注册

export default {
  emits:['del'],
}

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

<div @click="$emit('del',123)" > {{content}}</div>

v-model的实现

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

<input type="text" :value="content" @input="content = $event.target.value">

组件传值使用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

<Dbutton v-model="content"/>

<div @click="handle">语法糖传值--{{value}}</div>
// =====
 props:['value'],
methods:{
   handle(){
     this.$emit('update:modelValue',123)
  }
}