vue组件基本用法及示例

首先讲组件的创建有三种方式

创建组件方式1

第一步:使用vue.extend来创建全局组件

var com1 = Vue.extend({
    template:'<h3>这是使用Vue.extend创建的组件</h3>'//通过template属性来指定要展示的内容
})

第二步:使用vue.component('组件名称',创建出来的组件模块对象)

组件名称如果是驼峰那么调用的时候就要'-'分开比如 myCom1 调用的时候就要写成<my-com1></my-com1>

组件名如果不是驼峰则正常调用

Vue.component('mycom1',com1)

从上面可以看到组件的名字是 mycom1 在页面上调用只需要:

<mycom1></mycom1>

上面创建的步骤也可以简写成:

Vue.component('mycom1',Vue.extend({
    template:'<h3>这是使用Vue.extend1创建的组件</h3>'
}))

创建组件方式2

需要注意的是这种写法 template的内容需要额外用div包裹起来

//template指向的内容必须有且只有一个根元素 也就是多个标签的时候 用div包起来
        Vue.component('mycom2',{
              template:'<div><h3>这是直接使用vue.component创建出来的组件</h3></div>'
        })

页面上调用组件跟方法1一致

创建组件方式3

第一步:先定义一个组件名,并赋予一个id

Vue.component('mycom3',{
            template:'#tmp3'
        })

template内容提取出来,编写的位置要在示例的外部也就是在#app的外部,

然后template标签包裹起来隔开标签内引入我们定义组件的id tmp3

记得要用div包裹起来:

<div id="app">
        <!-- 调用组件 -->
        <mycom3></mycom3>

</div>
<!-- 在#app的外部使用template来定义组件的内容 -->
<template id="tmp3">
    <div>
       <h1>这是template元素在app外部定义的组件元素</h1>
       <h4>我觉得这个方法不错</h4>
    </div>
</template>

创建私有组件

上述三种创建组件都是属于创建共有的组件,全局都能调用,现在介绍如何创建私有组件

首先我们不在new的Vue实例的外部创建组件,因为那是创建全局组件的方式,私有组件实在实例内部进行;

var vm2 = new Vue({
            el:'#app2',
            data:{

            },
            methods:{

            },
            components:{
                //定义私有的组件
                login:{
                    template:'#tmp4'
                }
            }
        })

定义组件的对象:components

此时login 就是该私有组件的名称 template也是用id的形式进行传递,跟上述方法3相同

同个道理,我在页面调用只需要写上标签:

<login></login>

认识组件中data

我们new一个Vue实例的时候可以看到我们data返回的是一个对象:

var vm = new Vue({
    el:'#app',
    data:{
              
    },
    methods:{
    }
})

但是在组件中 data必须是一个方法并且!!! 方法内比如要return 一个对象哪怕是一个空对象 { }

Vue.component('mycom1',{
   template:'#tmp1',
      data(){
          return {
              msg:'这是组件中的data定义的数据'
          }
   }
})

组件切换1

实现组件之间的切换首先设置两个按钮每个按钮对应显示一个组件

通过点击其中一个按钮对应组件显示另外一个组件则隐藏

这边先假设我们有两个组件

设置两个按钮,在我前面的博客有写到 vue的时间修饰符这里运用.prevent 这是阻止a标签的冒泡事件

给组件绑定data属性 flag flag默认为false也就是隐藏

可以看到点击事件中我们进行赋值 true和false进行切换

<!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>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
    
</head>
<body>
    <div id="app">
        <a href="" @click.prevent="flag=true">登录</a>
        <a href="" @click.prevent="flag=false">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>

    </div>

    <template id="tmp1">
        <div>
            <h3>登录组件</h3>
        </div>
    </template>
    <template id="tmp2">
        <div>
            <h3>注册组件</h3>
        </div>
    </template>
    
    
    <script src="./lib/Vue.js"></script>
    <script>
        //组件1
        Vue.component('login',{
            template:'#tmp1',

        })
        //组件2
        Vue.component('register',{
            template:'#tmp2',

        })

        var vm = new Vue({
            el:'#app',
            data:{
               flag:true
            },
            methods:{
                

            }
        })
        
    </script>
</body>
</html>

组件切换2

上述的切换方式有些缺点只能用于两个组件之间的切换因为无非就是flase和true的切换

但是如果有多个组件,就不太适用,所以现在介绍多个组件的切换方法;

vue提供component来展示对应名称的组件(component 是一个占位符)

:is 是用来指定要展示的组件名称

<component :is="comName"></component>

这个例子有三个组件,我们在Vue实例的data对象中定义一个属性:comName

这个属性是用来干嘛的

用来让我们选择切换组件的时候存放组件名字的

我们看下代码:

<!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>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
    
</head>
<body>
    <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <a href="" @click.prevent="comName='chong'">充值</a>

        <!-- vue提供component来展示对应名称的组件
        component 是一个占位符, :is 是用来指定要展示的组件名称 -->
       <component :is="comName"></component>

    </div>
    
    <template id="tmp1">
        <div>
            <h3>登录组件</h3>
        </div>
    </template>
    <template id="tmp2">
        <div>
            <h3>注册组件</h3>
        </div>
    </template>
    <template id="tmp3">
        <div>
            <h3>重置组件</h3>
        </div>
    </template>
    
    
    <script src="./lib/Vue.js"></script>
    <script>
        //组件1
        Vue.component('login',{
            template:'#tmp1',

        })
        //组件2
        Vue.component('register',{
            template:'#tmp2',

        })
        //组件3
        Vue.component('chong',{
            template:'#tmp3'
        })

        var vm = new Vue({
            el:'#app',
            data:{
                comName:'login'
            },
            methods:{
                

            }
        })
        
    </script>
</body>
</html>

接着讲,我们定义了三个组件他们的名字分别是 login register chong

我们在点击的时候让他们的名字装到我们定义的属性里面 comName 这样就实现了点击按钮显示对应名字的组件

需要注意的是,我们页面调用组件不再是以组件名为标签进行调用

而是只需要引入 component标签并给属性 :is 绑定我们自己定义的comName就可以实现

我们从代码可以看出,不论我有几个组件,只要我把组件的名字放到属性comName中点击的时候

就能实现对应的切换而不是局限在与false和true上面,

组件的用法和示例就介绍到这里,有什么不清楚和指教的可以在评论区留言,谢谢!