Vue学习过程中的问题记录本（持续更新）

一、子组件如何取到父组件异步获取到的数据？
例子：
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区别