vue 自学笔记(七) 组件细节问题

前情提要:

　　这里盘点一下,组件细节的问题

现在我们观察一些用框架开发的网页BiliBili、掘金，会发现很多部分都十分相似或者一模一样，我们甚至可以将其拆分归类。而事实上，页面的确是被一个个组件构成的，本章，我们就对组件的细节做一个细致的拆分。

　　　　一:组件的使用

　　　　组件的注册分为全局注册和局部注册，目前我们用全局注册做例子。

　　　　

　　　　使用Vue.component()对 Vue 实例进行全局组件的注册。这里我们注册了一个叫 Row 的组件，本质是它的模板在template中定义。另外需要注意的是，与根实例 vm 不同，组件的 data 数据是一个函数，return 出绑定在组件上的属性。

　　　　　　1 :is 的组件

　　　　刚刚注册了一个全局的组件，现在我们来使用它，在页面上渲染一个表格，Row 的本质是<tr><td></td></tr>，我们用<tbody></tbody>包裹。

　　　　

　　走到页面，看到数据正常渲染，但真的是这样么？按 F12 打开控制台，我们审查元素，会惊奇的发现<tbody></tbody>并没有如我们所愿包裹着<Row></Row>组件渲染出来的<tr><td></td></tr>，而是在外面。其本质原因是因为在 H5 的规定中，<table></table>中只能放<td></td>和<tr></tr>。因此我们需要使用is属性来做一个转换。

　　　　

　　　　这里相当于做了一个翻译：用 is 属性说，这里用的是 tr，但 tr 实际是 Row 组件。

!!! 警告

　　二:全局注册于局部注册

到目前为止，我们只用过 Vue.component 来创建组件

　　

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如

　　

　　

　　在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

　　但全局注册是不够理想的，比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

　　因此在这种情况下，我们可以使用局部注册

　　

　　然后，我们可以自行选择将那些组件挂载到实例的 components 之中，对于 Vue 实例的 components 属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

　　

　　但与全局注册不同，局部注册的组件是不能够互相调用的，如果想要在一个局部注册的子组件里面调用另一个局部注册的子组件。就需要像注册组件一样在作为父组件的子组件中注册。

　　三:ref的使用

　　

　　　　虽然 vue 不推荐直接操作 DOM，但在一些情况下(制作复杂动画)必须得操作 DOM，这个时候就该使用 ref。

　　　　需求：希望 div 被点击的时候打印 div 的内容

　　

　　　　

　　　　官方文档这样定义 ref：被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。**如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；**如果用在子组件上，引用就指向组件实例。

　　　　因此，除了直接获取 DOM 元素，我们还可以获取组件的实例（用 ref 获取组件的 DOM。实际上获取的是组件的引用），为了更好的解释，我们实现一个简单的计数器：

　　　　

　　　　

　　

　四:父子组件数据传值

　　　　　　1:单向数据流与双向绑定

　　　　　　　　

单项数据流：通俗的来讲，父组件可以给子组件传值，但子组件不可以直接去修改父组件的值。React 中也是这种设计思想。

其实这样做是一种安全的做法，在项目较大，子组件层级过多的情况下，层层传递，很多子组件使用一个父组件的传值，若是子组件直接改动父组件的值，就可能会造成其他子组件依赖的值出现问题。

双向绑定：Vue 还有一个双向绑定的概念，使得我们会一不小心搞混。按笔者理解，二者的区别在于组件与组件之间的数据流向和视图层与数据层的数据流向。最明显的双向绑定是v-model指令，绑定在 input 框上，既可以通过视图层改变数据，也可以通过数据改变视图层。这期间并没有涉及到组件的传值。

　　　　　　2:父组件向子组件传值

我们修改刚刚的计数器案例，来实现父组件向子组件传值。父组件向子组件传递值的方式通常是属性的绑定。

　　　　　　3:子组件向父组件传值(修改)

我们现在希望点击子组件实现父组件的数值累加，那么我们很容易就想到了直接在子组件的handleClick方法里面去修改传过来的值。可是这样正确么？我们说 Vue 是单向数据流的，因此，我们不可以这样去做。

父组件的值就让父组件去修改

因此，我们需要通过一个事件（广播）告诉父组件我有一些操作，你需要改变你的值。父组件监听到这个广播后进行相应的修改。这个给父组件广播的方法，我们使用$emit实现。

　　

我们记得在子组件上绑定的是@change="handleChange"，现在的@change实际上是监听的子组件的名为change的广播，监听到广播后，父组件执行handleChange方法，修改 data 中的值，它的参数 step，是广播时传递的参数。