第一:props参数是实时更新的,而created和data仅会执行一次【当每次重新跳转到当前页面的时候,这也是为什么叫做当前页面或当前组件声明周期】!
第二:props参数无法修改【要修改只能赋值给在data中增加一个中间变量,修改data中的这个属性!或直接发射事件给父中间来修改----通常还是以发射事件给父组件修改为主,等价于函数的return】
props参数无法传入计算属性
2020/06/27增加
//start
props默认为单向绑定,是为了防止子组件无意间修改父组件的状态。
于是出现了绑定修饰符:.sync:双向绑定 官网地址
.once:单次绑定
<text-document v-bind:title.sync="doc.title"></text-document>//注意带有.sync
修饰符的v-bind
不能和表达式一起使用
//end
第三:props、data、create或OnLoad 的执行顺序和生命周期
props属性:组件传参是实时更新的,数据及时变化!【data和create方法都可以访问】
data属性:仅访问当前页面的时候,执行一次【create可以访问】
beforeCreated 和 create方法:当前页面或组件的Vue实例创建的开始,也是生命周期的开始
原文链接:https://blog.csdn.net/weixin_43343144/java/article/details/90379710
有一个使用场景。父组件中是一个输入框,点击显示键盘子组件,如果输入框中有值,自动带入子组件。
父组件中
<NumKeypad :enteringIsShow="enteringIsShow":KeyValue="numValue" @NumValue="GetNumValue"></NumKeypad>
子组件中
export default { data() { return { entering:"" } }, props: { KeyValue:{ type: String, default: "" } }, watch:{//通过监听keyValue的变化,给中间变量entering赋值 KeyValue(val,oldval){ this.entering=val; } } }