学习Vue之路（二）

一、组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。组件一句话就是可以定义自己的具有独特功能的html标签，就好比定义一个公共方法一样，可以随时调用。

1、全局组件
要注册一个全局组件，你可以使用 Vue.component(tagName, options)，在这里要注意，要确保在初始化根实例之前注册了组件，即在初始化Vue对象之前应先注册组件。所以图中<todo-item></todo-item>标签就会被渲染为“<li>这是个待办项</li>”




2、局部组件
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用，即id为app的div会被加载组件，而app1则不会。




3、is属性
当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ，<ol>，<table> ，<select> 限制了能被它包裹的元素， 而一些像 <option> 这样的元素只能出现在某些其它元素内部，这时可以使用is属性（当然，如果直接使用字符串模板的话就没有问题，如上文）




4、组件中的data属性
在使用自定义组件时，可以在其中使用data属性来声明自定义变量，data属性只能是函数。解析一下：在全局组件todo-item中，声明了一个变量counter，初始为0，此组件定义的是一个单击按钮，我用v-on指令为其监听单击事件，在组件内部就可以使用counter变量，每次点击变量counter自增加1，这时{{}}中的数据也会相应加1，双向绑定。




5、构成组件
组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。




6、Prop属性
1）使用props来传递数据
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。解析一下：首先声明一个全局组件todo-item，该组件允许接收一个名为'todo'的参数值，在使用todo-item标签时就可以使用todo属性，其实这里就是将arr这个对象赋给组件里的todo，这里我将列表arrs中的对象每次遍历时都传给组件todo-item，然后组件里就可以使用这个arr对象，从而拿到每一次遍历的结果。




2）动态Prop
在模板中，要动态地绑定父组件的数据到子模板的props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件。解析一下：首先声明一个全局组件todo-item，该组件允许接收一个名为'todo'的参数值，input元素中用v-model指令绑定了app这个Vue对象中的parentMsg数据，此时将parentMsg传给todo-item组件，就是将parentMsg的值赋给todo，然后在{{}}绑定数据中展示。




3）Prop单向数据流
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。为什么我们会有修改prop中数据的冲动呢？通常是这两种原因：

1、prop 作为初始值传入后，子组件想把它当作局部数据来用；

2、prop 作为初始值传入，由子组件处理成其它数据输出。
对这两种原因，正确的应对方式是：
1、使用data定义一个局部变量，并用 prop 的值初始化它：


2、使用computed定义一个计算属性，处理 prop 的值并返回。



7、v-on绑定自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，那就用自定义事件！
每个 Vue 实例都实现了事件接口（Event interface）即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件


这里解析一下：首先定义了一个button-counter的全局组件，定义了一个<button>元素，声明了一个变量counter，声明了一个方法increment，然后声明了一个Vue对象，其中有一个total变量，还有一个方法incrementTotal。在DOM中我使用了button-counter组件，在这个组件上声明了一个名为parent-function的自定义事件。刚开始通过v-on指令来监听button元素的click单击事件，此单击事件调用了自定义组件中的increament方法，在这个方法里每次使得变量counter自增加1，然后就是触发了parent-function事件，此时就调用了Vue对象中的incrementTotal方法，使得变量total自增加1，所以最终的实现效果就是：两个按钮每次单击后按钮本身的值自增加1，并且点击任意一个按钮，p元素里的total都会自增加1，如下：


子组件已经和它外部完全解耦了。它所做的只是报告自己的内部事件，至于父组件是否关心则与它无关。


8、使用Slot分发内容
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发。Vue.js 实现了一个内容分发 API ，使用特殊的 <slot> 元素作为原始内容的插槽。简单来说，slot就是一个插槽，如果没有这个插槽那么父组件的内容是无效的，当有了这个插槽父组件的内容就可以放入这个插槽中，或者放入指定插槽中（下文细说）。
1）单个slot
当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
解析一下：首先声明了一个my-component的全局组件，父组件中有两个p元素，此时在子组件中如果没有slot这个标签，那么这两个p元素就是无效的，当子组件中存在这个slot标签时，那么这两个p元素就会被渲染到slot标签的位置（就像一个插槽）。如果反过来，父组件中没有这两个p元素，而子组件中有slot标签，那么此时就会渲染slot标签中自己的内容。




2）具名slot
<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。

解析一下：父组件中p元素通过slot的属性就可以找到对应的插槽，slot属性值和子组件slot标签中的name属性值对应，而没有slot属性的p元素则会去找匿名的slot，如果没有则此p元素无效，同样如上文，如果父组件中没有内容，则会展示slot自身的内容。