一、子组件如何取到父组件异步获取到的数据?
例子:
1、父组件:
<template>
<div class="wrap">
<child :child-data="asyncData" @childready="childreadyInParent" v-if="asyncData" ref="child"></child>
</div>
</template>
<script type='text/ecmascript-6'>
import Child from 'components/children/children';
export default{
components: {
Child
},
data(){
return {
asyncData: ''
}
},
created(){
//模拟this.asyncData是异步获取的
setTimeout(() => {
this.asyncData = 'i got a gift for you......!!!! ';
console.log('pa finish!! ');
}, 5000);
},
mounted(){
this.$nextTick(() => {
//mounted只初始化了自己的数据和挂载了自己组建的dom
console.log('this.$el,this.$data:', this.$el, this.$data);
// console.log('children offsetHeight:', this.$refs.child);
})
},
methods: {
childreadyInParent(){
console.log('in pa after child mounted.');
// console.log('children offsetHeight:', this.$refs.child.$el.offsetHeight);
}
}
}
</script>
<style scoped lang='stylus' rel='stylesheet/stylus'>
.wrap
width: 100%
height: 100px
line-height 100px
background: green
</style>
2、子组件:
<template>
<div class="wrap">
<p>i am children, and i got message from my pa. that is【{{childData}}】 </p>
</div>
</template>
<script type='text/ecmascript-6'>
export default{
props: {
childData: {
type: String,
default: ''
}
},
created(){
console.log('child----the message from my pa is: ', this.childData);
},
mounted(){
console.log('child mounted!');
console.log('child this.$el,this.$data:', this.$el, this.$data);
this.$nextTick(() => {
this.$emit('childready');
})
}
}
</script>
<style scoped lang='stylus' rel='stylesheet/stylus'>
.wrap {
width: 100% height: 60px;
margin-top: 20px;
line-height 60px; background: red;
}
</style>
而且pa.vue中的这段可以证明官网上的一段话:mounted 不会承诺所有的子组件也都一起被挂载。:
mounted(){
this.$nextTick(() => {
//mounted只初始化了自己的数据和挂载了自己组建的dom
console.log('this.$el,this.$data:', this.$el, this.$data);
})
当pa.vue中的mounted()执行之后,只会初始化父组件自身的data和dom。并不会初始化子组件。
二、再复习生命周期
参考资料:
1、http://www.cnblogs.com/gagag/p/6246493.html
2、https://segmentfault.com/a/1190000008010666
官网资料:
1、https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
2、https://cn.vuejs.org/v2/guide/instance.html#实例生命周期
3、https://cn.vuejs.org/v2/api/#选项-生命周期钩子
4、https://cn.vuejs.org/v2/api/#vm-mount
二、如何查看一个组件被哪些组件调用?
三、css中的transform-origin
五、filter、compute、method区别