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區別