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)
   }
   }