vue2 子传父，父传子,v-model双向绑定

父传子

在components里面创建子组件aaaChild.vue

//子组件
<aaa-child :list="list" @add="add"></aaa-child>



data() {
   return {
     list:[
       {
         name:'小明',
         age:18
       },
       {
         name:'小红',
         age:16
       }
     ]
   }
 }

子传父

父

//设置自定义事件
<dyx-child @add="add"></dyx-child>

//val是子组件传过来的值
 methods: {
   add(val){
     console.log(val);
   }
 },

子

//随便设置一个事件
<button @click="add">点击</button>


//用this.$emit()向父组件传值  第一个是绑定父组件的自定义事件  第二个是传递的值
 methods: {
   add(){
     this.$emit('add','12312312' )
   }
 }

 v-model 双向绑定

父

//自定义事件
<aaa-child v-model="name" @blurs="blurss"></aaa-child>


//v-model绑定的数据
 data() {
   return {
     name:"123456"
   }
 }

//自定义事件
 methods: {
   blurss(){
     console.log(this.name);
   }
 }

子

//用:value绑定数据  双向绑定需要用到@input
//@blur="blurs" 是失去焦点的事件
<input type="text" :value="value" @input="inputChange" @blur="blurs">

//接受过来的数据用value
  props:{
    value:String
  }
 methods: {
   inputChange(e){
      this.$emit('input', e.target.value)
    },
//失去焦点事绑定父组件的自定义事件
   blurs(){
      this.$emit("blurs")
    }
 }