vue组件

落日映苍穹つ 2022-04-23 15:38 406阅读 0赞

# 定义全局组件的三种方式 #

方式1,伪代码

<div id="app">
        <-- 引用组件,是引号里的名词，不是实例对象-->
        <mycom1></mycom1>
        <-- 如果myCom1驼峰，引用组件如下 -->
        <my-com1></my-com1>
    </div> 
    
    <script>
        //1.1 使用Vue.extend创建全局组件
       var com1 = Vue.extend({
            template:'<h3>创建的组件</h3>'，
            //通过template属性，指定了组件要展示的html结构
        })
       
       //1.2 使用Vue.component('组件名',组件模板对象com1)
       Vue.component('mycom1',com1) //如果myCom1驼峰
        
    </script>

两步合成一步

<div id="app">
        <mycom1></mycom1>
    </div> 
    
    <script>
       // Vue.component 
       // 第一个参数,组件的名词，将来在模板标签引用就使用它
       // 第二个参数,Vue.extend创建的组件，template属性就是展示的内容
       Vue.component('mycom1', Vue.extend({
            template:'<h3>创建的组件</h3>'，
        })
                    ) 
        
    </script>

方式2

<div>
        <mycom2></mycom2>
    </div>
    
    <script>
    Vue.component('mycom2',{
        template:'<h3>这是直接用component创建出来的组件，更简化</h3>'
    })
    //无论以何种方式创建的 template，最多只能有一个唯一根元素，不能并排,同级。
    </script>

方式3

<-- 前两种template里写标签很麻烦，继续简化 -->
        
    <div>
        <mycom3></mycom3>
    </div>
        
    <-- 在VM绑定的#app外面，使用template元素，定义组件的HTML模板结构 -->
    <template id="tmp1">
    	<div>
    	<h1>在这里写，会有代码提示和高亮o</h1>        
        </div>
    </template>
        
    <script>
    Vue.component('mycom3',{
        template:'#tmp1',//绑定一个组件模板的Id
    })
    
    </script>

# 定义私有组件components #

以上三种方法定义的都是全局组件 ，现在定义私有组件

<template id=tmp2>
    	<h1>控制区域外，组件</h1>
    </template>
    
    <script>	
    var vm2 = new Vue({
        el:"#app2",
        components:{//定义实例内部私有组件的
            login:{//组件名字 login
                //template:'<h1>这是私有的组件</h1>'
                template:'#temp2'
            }
        }
    })
    </script>

# 组件中的data #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <script src="lib/vue.js"></script>
    	</head>
    	<body>
            <div id="app">
                <mycom1></mycom1>
            </div>
            
            <script type="text/javascript">
            	
                Vue.component('mycom1',{
                    template:'<h1>这是全局组件,这是组件中data的使用{
       {msg}}</h1>',
                    //data,必须是一个function,function必须返回一个对象
                    data:function(){
                        return {
                            msg:111,//组件中的data,在template中使用
                        }
                    }
                })
                
                var vm = new Vue({
                    el:'#app',
                    data:{},
                    methods:{},
                    
                })
            </script>
    	</body>
    </html>

# 组件中的methods #

实现一个计数器

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <script src="lib/vue.js"></script>
    	</head>
    	<body>
            <div id="app">
                <counter></counter>
                <counter></counter>
                <counter></counter>
            </div>
            
            <template id="tmp1">
                <div>
                    <input type="button" value="+1" @click="increment">
                    <h3>{
       {count}}</h3>
                </div>
                
            </template>
            <script type="text/javascript">
            	
                //var dataObj = {count:0} //外部定义一个对象
                
                Vue.component('counter',{
                    template:'#tmp1',
                    data:function(){
                        return {count:0} //这样就会互不影响了
                        //dataObj //return外部这个对象,但是多个counter 共享外部的数据
                    },
                    methods:{
                        increment(){
                            this.count ++
                        }
                    }
                })
                
                var vm = new Vue({
                    el:'#app',
                    data:{},
                    methods:{},
                    
                })
            </script>
    	</body>
    </html>

# 组件的切换 #

第一种方式
    设置一个变量，flag
    登录 v-if      
    注册 v-else

代码，缺陷只能两个切换

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <script src="lib/vue.js"></script>
    	</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>
             
             
            <script type="text/javascript">
            	
                //var dataObj = {count:0} //外部定义一个对象
                
                Vue.component('login',{
                    template:'<h3>假装登录</h3>',
                })
                
                Vue.component('register',{
                    template:'<h3>假装注册</h3>',
                })
                
                var vm = new Vue({
                    el:'#app',
                    data:{
                        flag:true
                    },
                    methods:{},
                    
                })
            </script>
    	</body>
    </html>

# 组件的切换的第二种方式 #

使用vue的component，展示组件
    
    <div>
    <component :is="'login'"></component>
    </div>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <script src="lib/vue.js"></script>
    	</head>
    	<body> 
            <div id="app">
                
                <a href="" @click.prevent="comName='login'">登录</a>
                <a href="" @click.prevent="comName='register'">注册</a>
                <component :is="comName"></component>
            </div>
             
             
            <script type="text/javascript">
            	
                
                Vue.component('login',{
                    template:'<h3>假装登录</h3>',
                })
                
                Vue.component('register',{
                    template:'<h3>假装注册</h3>',
                })
                
                var vm = new Vue({
                    el:'#app',
                    data:{
                        comName:'login',//当前显示组件的名词
                    },
                    methods:{},
                    
                })
            </script>
    	</body>
    </html>

命名视图

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router.js" ></script>
    </head>
    <body>
        <div id="app">
            <router-view name="default"></router-view>
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
        <script type="text/javascript">
            
            var header = {
                template:'<h1 class="header">头部区域</h1>'
            }
            var leftbox = {
                template:'<h1 class="left">侧边栏</h1>'
            }
            var mainbox = {
                template:'<h1 class="main">主题区域</h1>'
            }
            var router = new VueRouter({
                routes:[
                    //多个s <--component
                    {path: '/',components:{
                        default:header,
                        left:leftbox,
                        main:mainbox
                    }},
                    
                ]
            })
        	var vm =new Vue({
        		el:"#app",
                router
        	})
        </script>
    </body>
    </html>