夜光带你走进Vue.js（二十四）擅长的领域

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102462703

夜光序言：

有很多路，真的不想再走，虽然知道会走得更好，但真的不想再看到路上的泥土。如同，分手的恋人，真不想再重新来过，即使知道分手的原因在何处。

正文：这条程序街最靓的功能之一

Vue.js 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

我们，注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

例子1：全局组件

嗯唔~~所有实例都能用全局组件。

差不多上图这种效果

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>
<div id="app">
    <genius></genius>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    // 注册
    Vue.component('genius', {
        template: '<h1>自定义组件!</h1>'
    });
    // 创建根实例
    new Vue({
        el: '#app'
    })
</script>
</body>
</html>

例子2：局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>
<div id="app">
    <genius></genius>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var Child = {
        template: '<h1>自定义组件~~</h1>'
    };
    // 创建根实例
    new Vue({
        el: '#app',
        components: {
            // <genius> 将只在父模板可用
            'genius': Child
        }
    })
</script>
</body>
</html>