024 V 组件：全局 & 局部注册

不二如是

                               
登录/注册后可看大图

上一讲我们简单了解了什么是组件，本次来学习如何创建。

先来回顾一下，之前如何创建Vue实例：

<div id="myApp"></div>
<script>
    var app = new Vue({
        el:"#MyApp"
    })
</script>

组件的创建和上面很类似，需要注册后才能使用。

注册又分为“全局注册”和“局部注册”两种方式。

全局注册后，任何Vue实例都可以使用，例如：

<script>
    Vue.component('my-component',{
        // 选项
    })
</script>

my-component就是注册的组件自定义标签名称，建议采取小写字母加“-”分割的形式命名。

在实例创建注册后，我们就可以通过<my-component></my-component>的形式来使用组件了。

来一个完整的例子，创建div：

<div id="myApp">
    <my-component></my-component>
</div>

创建Vue：

<script>
    Vue.component('my-component',{
        // 选项
    });

    var app = new Vue({
        el:"#myApp"
    })
</script>

现在页面还是空白的，因为自定义的组件没有任何内容。

在选项中添加template，显示一下组件内容：

    Vue.component('my-component',{
        // 选项
        template:'<p>我是组件的内容</p>'
    });

template的DOM结构必须被一个元素包含，如果直接写成“我是组件的内容”，没有任何元素将无法被渲染。

在Vue实例中，使用components选项也可以实现局部注册组件。

注册后的组件只有在该实例作用域下有效。

组件中也可以使用components选项来注册组件，使组件嵌套。

创建一个变量：

   var fishc = {
        template:'<p>我是组件的内容</p>'
    }

然后在Vue实例中注册：

 var app = new Vue({
        el:"#myApp",
        components:{
            'my-component':fishc
        }
    })

同样可以实现，而且更容易记忆。

---

课后作业


1、组件创建时不注册可以使用（T/F）

2、补全代码，显示组件内容：

<div id="?">
    <?></?>
</div>
<script>
    Vue.component('?',{
        // 选项
        ?:'<p>我是组件的内容</p>'
    });

    var app = new Vue({
        el:"#myApp"
    })
</script>

3、在Vue实例中，使用components选项也可以实现局部注册组件。（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

1.F
2.

<div id="myapp">
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component',{
        template:'<p>我是组件的内容</p>'
    });

    var app = new Vue({
        el:"#myApp"
    })
</script>

3.T

Ruide

1.F
2.
<div id="myApp">
    <component></component>
</div>
<script>
    Vue.component('component',{
        // 选项
        component:'<p>我是组件的内容</p>'
    });

    var app = new Vue({
        el:"#myApp"
    })
</script>
3.T

一笙彤

0

HanYanShuang

学习

jack6666

1