绩效项目总结

1：所有的对数据的处理（只是针对增加字段的处理），必须放在最外面的父组件里：

即给相应的数据增加字段值不能放在子组件里，如上面的注释位置，正确做法应该放在父组件中：

html中引用方式：

2：切换时间按钮的时候，使用watch更新页面，但是在本地和测试环境不一样，如果这几个均使用watch监视时间的变化，在本地端由于数据更新特别快，所以时间发生变化的时候，所有的watch均会发生变化，但是当放在测试环境中，由于是异步请求，

当时间发生变化的时候，第一个watch监听到，然后更新部门的list，但是还没有更新完，后面的监听由于要根据部门code来申请新的数据，所以后面的请求需要监听第一个watch发生变化后的数值；

3:有关v-model和计算属性的set和get的属性

4：on-change只能用在input标签中的计算属性才能实现，

5：函数执行多次；

6:slot分发内容总结：

　　1）单个slot：js

Vue.component('my-component', {
  template: '<div><h2>我是子组件的标题</h2><slot>只有在没有要分发的内容时才会显示。</slot></div>',
})
new Vue({
  el: '#counter-event-example',
})

对应的html：

<div id="counter-event-example">
      <h1>我是父组件的标题</h1>
      <my-component></my-component>
</div>

显示结果为：

如果组件之间有内容，比如：

<div id="counter-event-example">
      <h1>我是父组件的标题</h1>
      <my-component>
        我是新内容
      </my-component>
</div>

则显示结果为：

也就是，子组件中放置一个占位符slot，父组件如果有内容则显示该内容，否则显示该占位符中的内容。（补充，如果父元素中有内容，则和子元素结合起来显示）

7：使用具名slot，对应的js

Vue.component('subdepart',{
    template:'<div><h2><slot name="app1">本期间暂无数据1</slot></h2>'
    +'<h6><slot name="app2">本期间暂无数据2</slot></h6>'
    +'<h1><slot>本期间暂无数据3</slot></h1></div>'
});

定义了名字为app1、app2和默认的slot；在html中，如果app1不存在，则显示模板中的本期间暂无数据；如果html中有值，则结合子元素一起显示，这里显示为"h2"标题；其中最后一个slot为默认slot，当html中什么都没有的时候显示该slot；

<div v-if="subStatus=='succ'">
                <subdepart>
                <div slot="app1"></div>
                <div slot="app2">22</div> 
                <div slot="app3"></div> 
                </subdepart>
</div>

当没有app1这个div的时候，显示app1不存在的默认数据；