<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="renderer" content="webkit">
<title>父子组件生命周期</title>
</head>
<body>
<div id="app">
<p>{{parentData}}</p>
<child message="hello子组件"></child>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
<script>
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: `<div><p>{{message}}</p> <p>{{childrenData}}</p></div>`,
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}`);
},
}
}
})
</script>
</body>
下面是输出
子组件在beforeCreate中读取外部的传入的变量时报错了,但是令我疑惑的是,上面可以输出this的值,如果message没有绑定到子组件上,最多就是输出undefined值,而不应该报错。
难道是vue在内部规定了子组件在beforeCreate的钩子函数中不能读取外部传入的数据,否则报错?
陪伴而非守候
相关分类