鍍金池/ 問答/HTML/ vue父組件傳給子組件的值,子組件只能接收一次i?

vue父組件傳給子組件的值,子組件只能接收一次i?

父組件傳給子組件的值。在父組件中這個值改變了,但是在子組件中這個prop的值還是第一次父組件傳給的值。
有遇到這個問題的嗎?

回答
編輯回答
妖妖

你可以通過監(jiān)聽 props 中定義的值來更新組件值,監(jiān)聽組件內(nèi)的值更新組件綁定的值
稍微寫了個二次封裝組件的 demo 可以參考下

<template>
    <input type="text" v-model="currentValue" @change="change" />
</template>

<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    },
    currentValue(val) {
      if (this.value !== val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    change(e) {
      this.$emit('change', e)
    }
  }
}
</script>
2018年7月30日 15:25