A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Siamid 初级黑马   /  2019-6-20 18:22  /  1285 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 Siamid 于 2019-6-20 18:31 编辑

# Vue组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。就像是python中封装一个类,在其他类中可以继承和调用类中的属性和方法。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

## 组件的基本使用

- **全局组件的使用**

```html
<!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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
         <!-- 将组件名以标签的形式添加到div中,调用组件中的内容 -->
        <zujian_all></zujian_all>   
    </div>

<script>
    // 全局组件通过 Vue.component注册
    Vue.component(
        'zujian_all',
        {   // template指定组件显示的html内容
            template:'<div>全局组件</div>',
        }
    )

    new Vue({
        el: '#app',
    })
   </script>
</body>
</html>
```

**Vue.component()方法中参数说明**

第一个参数指定组件名

第二参数以 {} 形式传递,在里面指定组件的属性,template指定组件的要加载的内容

- **局部组件指定**

```html
<!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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

<script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1</div>',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>  </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a
            }
           }
    )

    new Vue({
        el: '#app',
    })

    </script>
</body>
</html>
```

- **多个局部组件的使用**

```html
<!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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

<script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1</div>',
     };
     var zujian_b={
        template:'<div>局部组件2</div>',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>  <zujian_b></zujian_b>  </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a,
                zujian_b
            }
           }
    )

    new Vue({
        el: '#app',
    })
    </script>
</body>
</html>
```

- 组间的关系
  - 组件中可以通过components嵌套另外的组件,比如可以在组件zujian_a中嵌套组件zujian_b

```html
Vue组件
组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。就像是python中封装一个类,在其他类中可以继承和调用类中的属性和方法。所有的 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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
         <!-- 将组件名以标签的形式添加到div中,调用组件中的内容 -->
        <zujian_all></zujian_all>   
    </div>

<script>
    // 全局组件通过 Vue.component注册
    Vue.component(
        'zujian_all',
        {   // template指定组件显示的html内容
            template:'<div>全局组件</div>',
        }
    )

    new Vue({
        el: '#app',
    })
   </script>
</body>
</html>
Vue.component()方法中参数说明

第一个参数指定组件名

第二参数以 {} 形式传递,在里面指定组件的属性,template指定组件的要加载的内容

局部组件指定
<!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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

<script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1</div>',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>  </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a
            }
           }
    )

    new Vue({
        el: '#app',
    })

    </script>
</body>
</html>
多个局部组件的使用
<!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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

<script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1</div>',
     };
     var zujian_b={
        template:'<div>局部组件2</div>',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>  <zujian_b></zujian_b>  </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a,
                zujian_b
            }
           }
    )

    new Vue({
        el: '#app',
    })
    </script>
</body>
</html>
组间的关系
组件中可以通过components嵌套另外的组件,比如可以在组件zujian_a中嵌套组件zujian_b
<!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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

<script>
    // 局部组件注册,定义局部组件
    var zujian_b={
        template:'<div>局部组件2</div>',
     };

    var zujian_a={
        template:'<div>局部组件1   <zujian_b></zujian_b> </div>',
        components:{
            zujian_b
        }
     };

    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>    </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a
            }
           }
    )
    new Vue({
        el: '#app',
    })

    </script>
</body>
</html>
注意:

如果要进行组件嵌套,则必须先讲嵌套的组件定义出来,否则不生效,比如在组件zujian_a中嵌套zujian_b则必须先将zujian_b定义出来<!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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

<script>
    // 局部组件注册,定义局部组件
    var zujian_b={
        template:'<div>局部组件2</div>',
     };

    var zujian_a={
        template:'<div>局部组件1   <zujian_b></zujian_b> </div>',
        components:{
            zujian_b
        }
     };

    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>    </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a
            }
           }
    )
    new Vue({
        el: '#app',
    })

    </script>
</body>
</html>
```

**注意:**

如果要进行组件嵌套,则必须先讲嵌套的组件定义出来,否则不生效,比如在组件zujian_a中嵌套zujian_b则必须先将zujian_b定义出来

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马