vue 父子通信实例

 

一、child.vue

/* eslint-disable */
<template>
  <div>
    <input type="text" :value="childAge" @input="eventHandler($event.target.value)">
  </div>
</template>


<script>
  export default {
    props: ["childAge"],  //接收初始值

    model: {
      prop: "childAge",     // 对应的变量
      event: "someEvent"  // 父组件侦听的触发事件
    },


    methods: {
      //把修改后的值传递回去
      eventHandler(value){
        console.log(value)
        this.$emit('someEvent', value)
      },
    }
  }

</script>

二、father.vue

<template>
  <div>
    <h3>子组件v-model示例</h3>
    <p>age: {{parentAge}}</p>
    <p>age: <Child v-model="parentAge"/></p>
  </div>
</template>


<script>
  import Child from './child.vue';

  export default {
    components: {
      Child
    },

    data(){
      return {
        parentAge: 2300,
      }
    }
  }

</script>