2018-03-30

vue组件（二）

我们为什么要抽离组件？我感觉有两个原因：1、 为了复用、2、为了更好的对页面进行切分、管理。

单项数据流

每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

文档这句话又再一次给了我很大提醒，差点忽略了，子组件接受的数据，我在子组件内部永远不要去改变它

在子组件中如果要修改传入的值，vue文档给了两个建议：

1. 定义一个局部变量，并用 prop 的值初始化它
2. 定义一个计算属性，处理 prop 的值并返回

也就是说，要讲原始数据经过一到data中的变量或计算属性后再转手在return给模板，就不会修改原始数据了。

非prop特性

就是可以直接传入组件，而不用去定义prop。

非prop,我暂时的理解的就是给子组件传递一个变量，但是内部prop没有定义，那么这个变量就会被抛弃

自定义事件

主要就是说子组件内部触发事件后，如何传递给父组件。昨天学过了

给组件绑定原生事件

方法是：v-on:click.native=""。

原来我们使用的v-on="";是vue自己定义的事件，它对原生事件进行了一层封装。不是原生事件

但是我不太了解是原生事件，和什么时候要用到原生事件。但是估计很少用。

自定义组件的 v-model

原来的v-model是能在表单元素中使用，如：input等。
使用这个方法好像可以拿到原本拿不到的数据
感觉iview的checkbox里面没有绑定v-model.而是在外层套了一个组件上绑定了v-model感觉是不是用了这个方法。

非父子组件的通信

也就是说两个组件A和B，他们是平级的兄弟关系，非父子关系，如何通信。应该是在A和B两个都能访问到的地方定义一个BUS来存储数据，，B组件修改bus的值，被修改之后的BUS传递给组件A。

感觉好麻烦啊，而且感觉这种方式不好保持数据单一性。这种做法和数据单向流是冲突的。vue文档也推荐复杂的情况使用VUEX