Vue:父子组件传值props、sync、v-model详解

在vue中父子组件中传值

示例中：

1. 父组件Father向子组件Son传值（num：100）

2. 子组件Son点击修改按钮，需要修改接收父组件的传值，vue是单向数据流不允许直接修改接收的值。因此通知父组件Father去修改num值。 props单向数据流

1. 父子组件props传值

<template>
  <div>
    父组件：{{ num }}
    <Son
      :value="num"
      @change="changeNum"
    />
    <!--
        通过动态绑定value值，进行传值num
        监听子组件的change方法，
    -->
  </div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data () {
    return {
      money: 100,
    }
  },
  methods: {
    changeNum (val) {
      this.money = val
    }
  }
}
</script>
<template>
  <div>
    子组件：{{value}}
    <button @click="change">我要200</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    change () {
      //  子组件通过$emit方法，并传入事件名称'change'来触发父组件监听的change事件
      this.$emit('change', 200)
    }
  }
}
</script>

2. 父子组件传值 .sync修饰符

上述示例对prop（num）进行“双向绑定”。 因此推荐以 update:myPropName的模式触发事件取而代之。.sync修饰符

<template>
  <div>
    父组件：{{ num }}
    <!--
        @change="changeNum"改写为
        需要更新value值  this.num = 传过来的值
        @update:value="(val) => this.money = val"
    -->
    <Son
      :value="num"
      @update:value="(val) => this.num = val"
    />

  </div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data () {
    return {
      num: 100,
    }
  },
}
</script>
<template>
  <div>
    子组件：{{value}}
    <button @click="change">我要200</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    change () {
      this.$emit('update:value', 200)
    }
  }
}
</script>

.sync简写

把上述示例中

<Son
  :value="num"
  @update:value="(val) => this.num = val"
/>

修改为

<Son :value.sync="money"/>

3. v-model组件传值

使用v-model进行组件传值，默认会利用名为 value 的 prop 和名为 input 的事件。

因此我们将第一个示例修改需要传值value，监听input事件即可

<Son
  :value="num"
  /* @change="changeNum" */ 
  @input="changeNum"
/>

代码如下：

<template>
  <div>
    parent组件：{{prize}}
    <Daughter 
      :value="prize" 
      @input="prize => this.prize = prize"
    />
  </div>
</template>

<script>
import Daughter from './Daughter'
export default {
  components: { Daughter},
  data () {
    return {
      prize: 10
    }
  }
}
</script>
<template>
  <div>
    女儿：{{value}}
    <button @click="change">v-model修改</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    change () {
      this.$emit('input', 300)
    }
  }
}
</script>

修改为v-model简写

把上述示例中

<Daughter 
  :value="prize" 
  @input="prize => this.prize = prize"
/>

修改为

<Daughter v-model="prize"/>

参考：                                               

1. Vue 父子组件传值 props

2.重要：Vue2实现组件props双向绑定