在子组件里data定义一个变量，并用 prop 的值初始化，结果是空的

Question

子组件需要处理父组件传过来的值，

定义一个局部变量，并用 prop 的值初始化时，变量一直未空，不知道是哪里的问题

父组件

<number-input v-model.number="price" :initNumber="price"></number-input>

子组件

<template>
    <input type="text" v-model="number" @keyup="onKeyup">
</template>

<script>
export default {
    props: {
        initNumber: {
            default: 1234
        }
    },
    data () {
        return {
            number: this.initNumber
        }
    },
    methods: {
        onKeyup () {
            this.number = (this.number + '').replace(/^0+|\D/g, '')
            this.$emit('input', this.number)
        }
    }
}
</script>

Answer 1

fishenal 2017-07-07 16:44:07

不能这样写，props传入的属性已经是这个组件的属性了，所以initNumber和number是同样的意思，没必要再转一次。

如果非要转，只能在computed计算属性里转：

computed: {

    number () {

            return initNumber

            // 一般做一些处理，比如 return initNumber + 1

    }

}

当然如果你不是做什么数据处理也没必要原封不动的换个变量值

• 提问者 27网络 #1

  是要由子组件处理成其它数据输出，所以才这么做的

• fishenal 回复 提问者 27网络 #2

  子组件不能直接修改props，props传过来就是自己的属性了跟父组件没关，子组件想修改父组件的状态要通过事件，emit，on