在子组件里data定义一个变量，并用 prop 的值初始化，结果是空的
来源：7-6 购买详情页 - 总价计算（1）
27网络
2017-07-05
子组件需要处理父组件传过来的值，
定义一个局部变量，并用 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>写回答
1回答
-
fishenal
2017-07-07
不能这样写，props传入的属性已经是这个组件的属性了，所以initNumber和number是同样的意思，没必要再转一次。
如果非要转，只能在computed计算属性里转：
computed: {
number () {
return initNumber
// 一般做一些处理，比如 return initNumber + 1
}
}
当然如果你不是做什么数据处理也没必要原封不动的换个变量值
122017-07-11
相似问题