关于props的一些注意点

第一：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;
            }
        }
}