vue学习

1、界面和组件

    1.1 普通界面转换为组件（建安成本测算+配套成本测算两个界面内容操作一样，只是获取数据类别不一样）

         将建安成本测算转换为一个组件，只需要一步：name:'jacbCalcComponent'

    1.2 界面引用添加两个新界面，建安+配套成本测算：

        //2.1 将改造的组件写入界面元素
        <template>
          <div>                
              <v-jacbCalcComponent
                ref="jacbCalcComponent"
                :buildingType="buildingType">
              </v-jacbCalcComponent>    
          </div>
        </template>  

        <script>
          //2.2 引用单元
          import jacbCalcComponent from 'components/jacbCalcComponent';

          var dataStore={};
          export default {
            //2.3 祖册组件
            components: {
              'v-jacbCalcComponent': jacbCalcComponent
            },
            created: function(){
              debugger;
              var vueObj=this;
              vueObj.buildingType = '可售产品';      
            },
            mounted:function() {
              // debugger;    
              // var vueObj=this;
              // vueObj.buildingType = '可售产品';
            },
            data: function(){
              return {
                 buildingType: '',
              }
            },
            methods:{
            }
          };                      
        </script>

    1.3 通信：组件和外部引用

          1.3.1 组件调用父容器的事件

                   a、父节点界面元素绑定事件：v-bind:   ==   v-on:  ==  @:

                        @after-insert="afterInsert"

                   b、组件调用

                         this.$emit('after-insert', parameter1,......);

          1.3.2 应用属性：父节点直接访问组件的属性

                   a、组件定义属性：

                          props: ['buildingType'],

                  b、父节点在templete中直接绑定访问：

                       :buildingType="buildingType"

   1.4 生成周期

         生命周日图：

         https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA       

         父组件在执行完毕created是，就开始加载子组件，子组件就开始按照生命周日顺序执行各种事件