想要解决的问题:封装一个组件A,组件A的placeholder有默认值,但又有几处需要从父组件传入自定义值,即想要父组件有传值时使用父组件,没有传值使用默认(默认有分情况或者使用语言包,‘default’用不了),本文不解决Prop双向绑定。
报错信息:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “placeholder”
报错原因:修改了父组件传值,但传入的prop中的值是不允许改变的
解决办法:使用两个变量
组件A:
<template>
..
<view style="flex: 1;">
<input
:placeholder="placeholder"
/>
</view>
...
</template>
<script>
export default {
props: {
'placeholderValue':{ //传值为placeholderValue,之前出错就是使用placeholder
type:String,
default:''
},
},
data() {
return {
placeholder: this.placeholderValue, //将传进来的参数赋值
};
},
created() {
if(this.placeholder.length <= 0){ //如果传进来的值为空(长度为0),就是使用默认。 原先可以在props default 赋值,但使用了语言包,调用不到
this.placeholder = this.page_lang.common.base.password_format;
}
},
......
调用组件A
<A :placeholderValue=‘请输入...’'></A>
出错总结: 不清楚prop 和 :placeholder=“placeholder” 用法