Vue2.0

Vue2.0实例

* 组件是一个实例
* 销毁实例后，数据不会响应式，但是事件不会消除，需要在实例的 destoryed 需要原生js  window.removeEventListener("click",callback);
* computed method watch 使用
* vue绑定事件时，如果不加括号，默认方法中传一个 event事件对象，如果想加括号必须并且想获取事件对象，括号里必须加 $event
* 事件修饰符 
    1. stop 当前事件不会向上冒泡(外层)
    2. self 当前触发事件的元素，就是绑定的事件的元素 (e.target === e.currentTarget)
    3. once 事件只触发一次
* 表单绑定 v-model = "xxx" ;对应的修饰符
    1.  v-model.lazy = "xxx"， 失去焦点才获取对应的值， 性能优化
    2. 

Vue2.0 组件

使用组件的细节

1. 在 ttable > tbody > tr 使用子组件，但是H5规范 必须 tbody 里面必须是 tr ，所以使用 is 属性 <tr is="Row"></tr>
2. 除了根组件以外的组件，定义data必须是一个函数， 因为子组件可能会被调用多次，子组件的数据是独立的，所以才用函数形式返回一个对象，保证组件之间的数据是独立的
3. 操作dom时候 需要在标签 使用ref属性 来获取dom节点对象。如果在组件使用ref获取组件的引用， 可以通过ref来获取组件的最新状态的数据。来写自己父组件的逻辑。
4. 如果想监听组件的原生事件，必须在组件.nav 修饰符，否在会认为监听的自定义的事件

组件间的传值

1. props/$emit() 适合尽量使用一层关系的组件
   注意

   • 因为vue中 有单向数据流 功能，就是父组件可以传过去的值，如果传过去基本类型则子组件直接改变会报错;如果传过去引用类型则子组件直接改变不会报错，但是不建议子组件直接修改。
   • 解决思路：将接受到的数据 赋值给子组件一个变量，然后改变这个变量就可以的
   • 子组件向父组件传值 使用 $emit("event",data)，然后父组件监听 子组件传过来的事件 @event="handle"

2. children　＆ ref（只能父子组件间通信）

3. bus(var bus = new Vue)

       Vue.prototype.bus = new Vue()
       bus.$emit('',data);
       bus.$on('', () => {});
   

4. provide/ inject (使用用于跨级组件,数据不是响应式的)
   provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
   provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

//父组件
provide {
    return {
        datas: this.datas
    }
}

//子孙组件
inject: ['datas'] 

5. listeners(只适合多级组件传数据不做任何处理)
   多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法---- listeners

简单来说： listeners 是两个对象， listeners里存放的是父组件中绑定的非原生事件。

attrs"向内部组件传递。

6. vuex(适合大的项目组件，业务逻辑复杂)