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

不二如是

                               
登录/注册后可看大图

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

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

1. <div id="myApp"></div>
   
2. <script>
   
3.     var app = new Vue({
   
4.         el:"#MyApp"
   
5.     })
   
6. </script>

复制代码

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

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

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

1. <script>
   
2.     Vue.component('my-component',{
   
3.         // 选项
   
4.     })
   
5. </script>

复制代码

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

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

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

1. <div id="myApp">
   
2.     <my-component></my-component>
   
3. </div>

复制代码

创建Vue：

1. <script>
   
2.     Vue.component('my-component',{
   
3.         // 选项
   
4.     });
   
5. 
   
6.     var app = new Vue({
   
7.         el:"#myApp"
   
8.     })
   
9. </script>

复制代码

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

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

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

复制代码

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

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

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

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

创建一个变量：

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

复制代码

然后在Vue实例中注册：

1. var app = new Vue({
   
2.         el:"#myApp",
   
3.         components:{
   
4.             'my-component':fishc
   
5.         }
   
6.     })

复制代码

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

---

课后作业


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

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

1. <div id="?">
   
2.     <?></?>
   
3. </div>
   
4. <script>
   
5.     Vue.component('?',{
   
6.         // 选项
   
7.         ?:'<p>我是组件的内容</p>'
   
8.     });
   
9. 
   
10.     var app = new Vue({
    
11.         el:"#myApp"
    
12.     })
    
13. </script>

复制代码

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



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

lbjstudypython

1.F
2.

1. <div id="myapp">
   
2.     <my-component></my-component>
   
3. </div>
   
4. <script>
   
5.     Vue.component('my-component',{
   
6.         template:'<p>我是组件的内容</p>'
   
7.     });
   
8. 
   
9.     var app = new Vue({
   
10.         el:"#myApp"
    
11.     })
    
12. </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