<!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的钩子函数中不能读取外部传入的数据,否则报错?
2 回答
陪伴而非守候
TA贡献1757条经验 获得超8个赞
因为vue的数据劫持机制
在beforeCreate钩子中访问 this.message 实际上调用了
this.message的get函数 而在get函数中vue返回的是 this['_props']['message']
显然这个时候 this['_props'] 为undefined 这就是报错原因.
添加回答
举报
0/150
提交
取消