Vue从入门到精通-14-Vue组件_定义全局子组件的关键字是-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_76926204/article/details/138468801

子组件的定义和注册

我们在本文的第一段中，通过Vue.component形式定义的是全局组件。这一段中，我们来讲一下子组件。

在父组件中定义子组件

比如说，一个账号模块是父组件，里面分为登陆模块和注册模块，这两个晓得模块就可以定义为子组件。

需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 
 <body>
 
     <div id="app">
         <account>
 
         </account>
     </div>
 
     <script>
 
         //定义、注册组件
         Vue.component('account', {
             template: '<div><h2>账号模块</h2> <login></login></div>',
             components: {
                 'login': {
                     template: '<h3>登录模块</h3>'
                 }
             }
         });
 
         new Vue({
             el: '#app'
         });
     </script>
 </body>
 
 </html>

我们发现，既然是定义父亲<account>的子组件，那么，子组件<login>的调用，只能写在父组件<account>的template模板中。

显示效果：

在 Vue 根实例中定义子组件

当然，我们还可以这样做：把整个 Vue 对象当成父亲，这样的话，就可以在 Vue 示例中定义一个子组件。如下：

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 
 <body>
 
     <div id="app">
         <login> </login>
     </div>
 
     <script>
 
         new Vue({
             el: '#app',
             //在Vue实例中定义子组件
             components: {  // components 是关键字，不能改
                 'login': {
                     template: '<h3>登录模块</h3>'
                 }
             }
         });
     </script>
 </body>
 
 </html>

这样写的话，我们定义的子组件<login>在整个#app区域，都是可以使用的。

上面的代码，还有另外一种写法：（把子组件的模板定义，存放到变量中）【重要】

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 
 <b