{{parentData}}
var app = new Vue({
el: '#app',
data: {
parentData: '父组件数据',
},
beforeCreate() {
console.log(`Parent--beforeCreate ${this.parentData} ${this.$el}`);
},
created() {
console.log(`Parent--created ${this.parentData} ${this.$el}`);
},
components: {
child: {
template: `
{{message}}
{{childrenData}}
props: {
message: {
type: String
}
},
data: function () {
return {
childrenData: '子组件数据'
}
},
beforeCreate() {
console.log(this);
console.log(`Child--beforeCreate ${this.message} ${this.childrenData} ${this.$el}`);
},
created() {
console.log(`Child--created ${this.message} ${this.childrenData} ${this.$el}`);
},
}
}
})
下面是输出
子组件在beforeCreate中读取外部的传入的变量时报错了,但是令我疑惑的是,上面可以输出this的值,如果message没有绑定到子组件上,最多就是输出undefined值,而不应该报错。
难道是vue在内部规定了子组件在beforeCreate的钩子函数中不能读取外部传入的数据,否则报错?