不挂载组件渲染_12、全局组件和局部组件

本文重点：

如何注册全局组件；
如果注册局部组件；
在标签上挂载组件。

使用组件的原因：提高代码的复用性。

如果你不是很理解组件的话，那么你可以把组件理解为一块块的“积木”。

在你用积木搭一个机器人的时候，那一块块的积木，就是一个个的组件。

一、全局注册组件

<div class="app"><my-component></my-component>  // app 中使用组件，组件的名字是 my-component
</div>Vue.component('my-component', {  // 注意：全局组件应该在 Vue 实例之前就注册好template: '<h1>当一阵风吹来</h1>'  // template: 模板，当使用这个组件时，就会渲染模板中的内容
})var app = new Vue({el: '.app',data: {}
})

先说为什么全局组件要在 Vue 实例之前就注册好？

在上面这个例子中，app 这个 Vue 实例中，使用了 my-component 全局组件。如果 my-component 是在 app 之后注册，那么当 app 挂载到页面时，my-component 还没有注册，那么自然 app 中就不能使用 my-component 这个组件了。

如果 my-component 在 app 之后注册，控制台中会报错：

像上面代码中将 my-component 在 app 之前注册，是正确的做法，页面会这样渲染：

上图中，因为组件的 template 中，就是 h1 标签，所以会渲染 h1 标签。

全局组件有什么好处呢？

那就是所有的 Vue 实例中，都可以使用这个组件。

<div class="app">  <my-component></my-component>  // app 中使用了 my-component
</div><div class="bpp"><my-component></my-component>  // bpp 中也使用了 my-component
</div>Vue.component('my-component', {template: '<h1>当一阵风吹来</h1>'
})var app = new Vue({el: '.app',data: {}
})var bpp = new Vue({el: '.bpp',data: {}
})

页面渲染：

app 和 bpp 中都有 h1 标签。

二、局部注册组件

所谓局部注册，就是说在某个 Vue 实例中注册，而不在全局注册。那么同理，局部注册的组件，只能在当前 Vue 实例中使用。

比如说，在 app 这个 Vue 实例中注册的组件，只能在 app 中使用，不能在 bpp 或者 cpp 中使用。

<div class="app"><my-component></my-component>
</div>var app = new Vue({el: '.app',data: {},components: {  // 和全局注册不同，全局注册是 component，而这里是 components，因为可能有很多个组件'my-component': {template: '<h2>风筝有风，海豚有海</h2>'}}
})

渲染效果：

那我们来试试，如果在 bpp 中使用会怎样？

<div class="app"><my-component></my-component>
</div><div class="bpp"><my-component></my-component>  // bpp 中使用了 my-component
</div>var app = new Vue({el: '.app',data: {},components: {'my-component': {template: '<h2>风筝有风，海豚有海</h2>'}}
})var bpp = new Vue({el: '.bpp',data: {}
})

如上代码中，my-component 是在 app 中注册的，本应在 app 中使用，可是 bpp 中也使用了 my-component 。那么现在会如何渲染呢：

注：报错信息没有截取全部

可以看到，app 还是正常渲染。而 bpp 中，h2 标签没有被渲染，仍然显示 <my-component>，并且控制台也报错了。

三、挂载组件

有些标签，它里边只能写特定的标签，不可以或者不推荐写其他标签。

比如：table 中最好就写 tr、td；ul 和 ol 中只写 li 标签。

当然，如果你不遵守这些，浏览器仍然可能帮你正确显示出来，但这样可能会给浏览器增加不必要的负担。而且，不遵守规范这件事，总归是不好的。

可如果我们就是要在这些标签中使用组件呢，从上面的例子来看，在标签中写的组件，是长的这个鬼样子：

这tm是个标签吗？

这不是 HTML 中的标签，这是我们自定义的标签，Vue 允许我们这么做。

回到之前那个问题，比如我要在 table 中使用 my-component 咋办？

如果是像下面这样写：

<div class="app"><table><my-component></my-component>  // table 中直接使用 my-component 标签</table></div>var app = new Vue({el: '.app',data: {},components: {'my-component': {template: '<h2>风筝有风，海豚有海</h2>'}}
})

渲染效果：

乍一看好像没毛病，可是仔细一看，h2 标签怎么跑到 table 标签外面去了？？

因为我们之前说过了，table 标签里边，tm 不能写 <my-component>，只能写 tr、td、tbody 这种。

所以我们应该像下面这样：

<div class="app"><table><tr is="my-component"></tr>  // table 中写的是 tr，用 is 属性把 my-component 挂载到 tr</table></div>var app = new Vue({el: '.app',data: {},components: {'my-component': {template: '<h2>风筝有风，海豚有海</h2>'}}
})

渲染效果：

现在，h2 标签是在 table 标签之中了。

如果你不理解上面 is 属性挂载的话，那么你就这么理解：

table 里边是 tr 没错，而 tr 其实是(is) my-component 组件。