Vue组件简介

1.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定义出来

posted @ 2020-08-11 04:28  sewen  Views(173)  Comments(0)  Edit  收藏  举报