Vue父子组件通信问题

150 阅读1分钟
  1. v-model模式 这种模式是Vue2.2之后提出的,父组件使用v-model指令与子代绑定数据speaks
<template>
  <doggie v-model="speaks" />
</template>
<script>
  export default {
    data: {
      speaks: 'bark!'
    }
  }
</script>

同时,子组件要在props里面声明speaks

<template>
    <input :value="value" @input="$emit('input', $event.target.value)"  />
</template>
export default {
  props: ['value'],
}

并且子组件还要添加一个model

export default {  
  props: ['sound'],
  model: {
    prop: 'sound',
    event: 'updateSound'
  },
}

这样子组件触发updateSound就会同时改变父子组件的speaks变量。