vue中的组件

Posted feixiangdecainiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的组件相关的知识,希望对你有一定的参考价值。

为了拆分Vue实例中的代码量,以不同的组件划分不同的功能,使用功能的时候直接调用相关的额组件就行了

模块化:从代码的逻辑角度进行划分的,方便代码的分层开发,每个模块的只能单一

组件化:从ui界面的角度进行划分的,方便ui间的复用

组件的实现方式

方式一:

        var com1=Vue.extend({
            template:<h3>这是使用Vue.extend属性创建的组件</h3>//通过template属性,指定组件需要展示的html结构
        })
        // 使用vue.component(‘组建的名称‘,创建出来的组件模板对象)
        Vue.component(mycom1,com1)

使用

        <!-- 使用的时候直接当做HTML标签的形式使用,注意在驼峰的命名方式中名字需要改成 -小写 -->
        <mycom1></mycom1>

 

方式二:

        Vue.component(‘mycom2‘,{
            // 注意组件只能有唯一的根元素,有且仅有一个根元素
            template: ‘<div><h1>这是使用h1创建的</h1><span>123</span></div>‘
        })

方式三:

直接控制一个template标签对象,这种方式可以写的时候有提示

        Vue.component(‘mycom3‘,{
            template: ‘#tmpl‘
        })
    <template id="tmpl">
        <div>
            <h1>这是通过template元素定义的组件结构</h1>
        </div>
    </template>

el data methods filters directivess beforecreate

私有组件的使用

            components:{
                login: {
                    //template:‘<h1>私有组件</h1>‘
                    template: ‘#temp‘
                }
            }

 

 

组件中的数据

        Vue.component(‘mycom1‘,{
            // 组件可以有自己的数据,组件的data和实例的data有点不一样,实例中的data可以是一个对象
            // 组建中的data必须是一个方法
            // 方法内部号必须返回一个对象
            // 组建中的数据和实例中的data使用方式完全一样,使用插值表达式
            template: ‘<h1>这是全局组件---{{msg}}</h1>‘,
            data: function(){
                return {
                    msg:‘这是组件自己的数据‘
                }
            }
        })

自定义的组件实现按钮加一并且显示的功能,

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

    </div>
    <template id="temp">
        <div> 
            <input type="button" value="+1" @click="increment">
            <h3>{{count}}</h3>
        </div>
    </template>

    <script>

        Vue.component(‘counter‘, {
            template: ‘#temp‘,
            data: function () {
                return {
                    count:0
                }
            },
            methods:{
                increment(){
                    this.count++
                }
            }
        })


        var vm = new Vue({
            el: ‘#app‘,
        })

v-if和v-else实现点击相应的标签实现登录和注册界面的简单切换

    <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>

    <script>
        Vue.component(‘login‘,{
            template:‘<h3>登录组件</h3>‘

        })
        Vue.component(‘register‘,{
            template:‘<h3>注册组件</h3>‘
        })
    
        var vm =new Vue({
            el:‘#app‘,
            data:{
                flag:true
            }
        })
    </script>

 

实现组件切换的第二种形式

使用vue提供的component来指定需要放置的组件,里面有个属性需要放置组件的名字,这里我们将其放上一个VM中定义的变量,这样在不同的点击事件中将不同的组件名字赋予变量,这样来实现组件的切换

    <div id="app">

        <a href="" @click.prevent="comName=‘login‘">登录</a>
        <a href="" @click.prevent="comName=‘register‘">注册</a>
        <!-- 在这里指定需要展示组建的名称 -->
        <component :is="comName"></component>

    </div>
    

    <script>
        Vue.component(‘login‘,{
            template:‘<h1>登录组件</h1>‘
        })

        Vue.component(‘register‘,{
            template:‘<h1>注册组件</h1>‘
        })

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

        // component\template\transition\transitiongroup
    </script>

动画实现组件之间的切换,使用transition标签将需要切换的标签放在里面,还可以在transition标签中实现动画的切换模式

<!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="./lib/vue-2.4.0.js"></script>
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px)
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease
        }
    </style>
</head>
<body>

    <div id="app">

        <a href="" @click.prevent="comName=‘login‘">登录</a>
        <a href="" @click.prevent="comName=‘register‘">注册</a>
        <!-- 在这里指定需要展示组建的名称 -->
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>

    </div>
    

    <script>
        Vue.component(‘login‘,{
            template:‘<h1>登录组件</h1>‘
        })

        Vue.component(‘register‘,{
            template:‘<h1>注册组件</h1>‘
        })

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

        // component\template\transition\transitiongroup
    </script>
</body>
</html>

 

以上是关于vue中的组件的主要内容,如果未能解决你的问题,请参考以下文章

vscode代码片段生成vue模板

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件

vue-个人学习----组件

vue3基础练习