vue學習筆記(七)組件

時間 2019-11-29

標籤 vue 學習筆記組件简体版

原文原文鏈接

前言

在前面vue的一些博客中，咱們幾乎將vue的基礎差很少學習完了，而從本篇博客開始將會進入到vue的另外一個階段性學習，本篇博客的內容在之後的vue項目中佔很大的比重，因此小夥伴們須要認真學習，本篇博客的內容也比較簡單，看過我博客的人都知道我所寫的每一篇博客都是很是的詳細的，因此你們不要擔憂學不會。我會盡可能將所學的知識講解的通俗易懂，讓你們學習起來更加快樂，那麼一塊兒來看看吧！javascript

本章目標

學會使用全局組件和局部組件
學會ref引用

初識組件

解釋：組件系統是 Vue 的另外一個重要概念，由於它是一種抽象，容許咱們使用小型、獨立和一般可複用的組件構建大型應用。仔細想一想，幾乎任意類型的應用界面均可以抽象爲一個組件樹css

組件一般能夠用來製做單頁應用程序(SPA)html

組件的話咱們主要分爲兩類，一種是局部組件，一種是全局組件，接下來我會介紹這兩種組件vue

全局組件

全局組件毫無疑問，確定是不少地方均可以訪問的了，html5

語法：

Vue.component('組件名',{
template:'模板'
})java

這是最簡單定義全局組件的語法，接下來帶你們簡單入門一下全局組件數組

(1)全局組件註冊方式一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>全局組件註冊方式一</title>
    </head>
    <body>
        <div id="app">
            <t1></t1>
        </div>
        <div id="demo">
            <t1></t1>
        </div>
        <script type="text/template" id="template1">
            <div>這是一個組件</div>
        </script>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('t1',{
                template:'#template1'
            })
            let vm=new Vue({
                el:'#app'
            })
            let d=new Vue({
                el:'#demo'
            })
        </script>
    </body>
</html>

首先咱們使用script標籤來定義模板而後將模板在組件中註冊，在這裏咱們定義了兩個vue實例，發如今demo和app中均可以使用，證實全局組件註冊成功了，這是定義組件的第一種方法，接下來咱們學習第二種app

(2)全局組件註冊方式二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <temp></temp>
        </div>
        <template id="template1">
            <div>這是一個組件</div>
        </template>
        <div id="demo">
            <temp></temp>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('temp',{
                template:'#template1'
            })
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
            let app=new Vue({
                el:'#demo'
            })
        </script>
    </body>
</html>

第二種方法咱們直接使用vue提供的template標籤訂義模板而後再組件中註冊就能夠了，dom

(3)全局組件註冊方式三

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-compent></my-compent>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('myCompent',{
                template:'<div>這是第三種定義組件的方法</div>'
            })
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                },
                computed:{
                    
                }
                
            })
            
        </script>
    </body>
</html>

這是第三種定義全局組件的方法，三種方法中均可以使用，主要看我的習慣，反正我是比較喜歡第三種，全局組件註冊講到這裏就結束了，接下來主要講解局部組件祖冊。佈局

局部組件

局部組件的話固然是定義在vue實例裏面定義的了，局部組件只在當前vue實例中有效

(1)局部組件註冊

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>局部組件註冊</title>
    </head>
    <body>
        <div id="app">
            <hello></hello>
            <!--<hi></hi>-->
        </div>
        <div id="demo">
            <hi></hi>
            <!--<hello></hello>-->
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm1=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    'hello':{
                        template:'<div>我叫hello,你叫什麼</div>'
                    }
                }
            })
            let vm2=new Vue({
                el:'#demo',
                components:{
                    'hi':{
                        template:'<div>我叫hi，你叫什麼</div>'
                    }
                }
            })
        </script>
    </body>
</html>

結果的話我就不貼出來了，你們能夠嘗試一下，若是咱們在app中使用hi組件或者在demo中使用hello組件的話，vue將會給出警告的，由於咱們註冊的是局部組件，因此沒法使用。

ref引用

在介紹ref引用以前，我想帶你們實現一個小demo,需求是這樣的，頁面上共有四個按鈕分別爲紅，黃，綠，藍，當咱們點擊某個按鈕的時候就顯示對應的顏色，以下圖所示

當咱們點擊紅色的時候，顯示紅色，依次類推，那就由我帶你們實現這個小demo吧！固然仍是應用組件的知識，畢竟趁熱打鐵

(1)添加組件佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ref引用</title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                border: 2px solid black;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <color-template></color-template>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    colorTemplate:{
                        data(){
                            return{
                                colorArray:['red','yellow','green','blue']
                            }
                        },
                        template:`<div class="btn_group">
                            <button v-for="color in colorArray" :style="{background:color}">{{color}}</button>
                            <div class="box"></div>
                        </div>`,
                    }
                }
            })
            
        </script>
    </body>
</html>

效果

在這裏咱們定義了局部組件，而後在局部組件中返回了顏色對應的數組，渲染的時候將顏色渲染到對應的按鈕上，而且爲每一個按鈕綁定對應的背景顏色。

(2)綁定事件

接下來咱們爲每個按鈕添加事件，而後點擊的時候獲取對應的顏色，咱們在事件中傳入對應的顏色值名稱就能夠

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ref引用</title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                border: 2px solid black;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <color-template></color-template>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    colorTemplate:{
                        data(){
                            return{
                                colorArray:['red','yellow','green','blue']
                            }
                        },
                        template:`<div class="btn_group">
                            <button v-for="color in colorArray" :style="{background:color}" @click="handleClick(color)">{{color}}</button>
                            <div class="box"></div>
                        </div>`,
                        methods:{
                            handleClick(color){
                                console.log(color);
                            }
                        }
                    }
                }
            })
            
        </script>
    </body>
</html>

結果

當咱們依次點擊對應的按鈕的時候，對應顏色的值已經取到了，固然咱們如今已經實現這個功能了，可是爲了鞏固一下之前的知識，我也會教你們使用另外一種方法來獲取就是下文提到的dataset的使用。

(3)dataset的使用

在html5中新增了data-xx的屬性，咱們知道data-xx能夠用來存數據因此咱們也能夠將對應的顏色保存在data-xx中，而後經過dataset獲取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ref引用</title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                border: 2px solid black;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <color-template></color-template>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    colorTemplate:{
                        data(){
                            return{
                                colorArray:['red','yellow','green','blue']
                            }
                        },
                        template:`<div class="btn_group">
                            <button v-for="color in colorArray" :style="{background:color}" @click="handleClick" :data-color="color">{{color}}</button>
                            <div class="box"></div>
                        </div>`,
                        methods:{
                            handleClick(e){
                                const color=e.target.dataset.color;
                                console.log(color);
                            }
                        }
                    }
                }
            })
            
        </script>
    </body>
</html>

使用這種方法也能夠實現依次點擊，獲取對應顏色的值，結果的話和上面的結果同樣，在這裏我就不截圖了

(4)實現效果

獲取到對應的顏色以後咱們就要實現如上的效果，如今就必須用到ref的引用了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ref引用</title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                border: 2px solid black;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <color-template></color-template>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    colorTemplate:{
                        data(){
                            return{
                                colorArray:['red','yellow','green','blue']
                            }
                        },
                        template:`<div class="btn_group">
                            <button v-for="color in colorArray" :style="{background:color}" @click="handleClick(color)" :data-color="color">{{color}}</button>
                            <div class="box" ref="squareBox"></div>
                        </div>`,
                        methods:{
                            handleClick(color){
                                const box=this.$refs.squareBox;
                                box.style.backgroundColor=color;
                            }
                        }
                    }
                }
            })
            
        </script>
    </body>
</html>

效果

效果的話咱們已經實現了，可是咱們仍是不知道什麼是ref,彆着急，且聽我一一道來

咱們知道javascript操做dom是很是消耗性能的，所以在vue中提供了ref來獲取相應的dom元素獲取方法是this.$refs獲取的是全部含有ref引用的dom元素，主要分爲四種，以下實例。

(1)單獨綁定

單獨綁定的話，主要就是獲取相應的dom元素，就像原生的javascript獲取元素同樣或者是jQuery中的$獲取元素同樣，看下實例就知道了，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ref單獨綁定</title>
    </head>
    <body>
        <div id="app">
            <div ref="square_box" class="box"></div>
            <button @click="handleClick">獲取元素</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    handleClick(){
                        var dom=document.getElementsByClassName('box')[0];
                       console.log(this.$refs.square_box);
                        console.log(dom);
                    }
                },
                computed:{
                    
                }
                
            })
            
        </script>
    </body>
</html>

在這個實例中，咱們使用了兩種方法來獲取dom元素，一種是使用ref來獲取，另外一種使用原生的javascript來獲取，能夠看到兩種方法都獲取到了dom元素

結果:

(2)綁定重複的元素

在javascript中，咱們獲取相同的節點是經過document.getElementsByClassName('節點名稱')或者document.getElementByName('節點名稱')，可是jQuery中使用$來獲取的，返回的是一個數組，可是ref綁定多個相同的元素以後，後面綁定的會覆蓋前面綁定的，這就是ref綁定元素神奇的一方面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ref綁定重複的元素</title>
    </head>
    <body>
        <div id="app">
            <div class="box" ref="v_box"></div>
            <div class="box" ref="v_box"></div>
            <button @click="hanldeClick">獲取元素</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    hanldeClick(){
                        var doms=document.getElementsByClassName('box');
                        console.log(doms);
                       console.log(this.$refs.v_box);
                    }
                },
                computed:{
                    
                }
                
            })
            
        </script>
    </body>
</html>

在這個示例中，咱們一樣使用上面的兩種方法來獲取元素，這樣一對比結果就出來了，使用ref獲取的元素只用一個，就是最後面寫的會覆蓋前面寫的，總之不管有多個重複的元素使用ref老是會返回最後一個結果。

結果：

(3)v-for中ref實現的效果

若是在實際項目中真的有這個需求，須要綁定多個相同的元素呢？很簡單使用v-for就能夠了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for中ref實現的效果</title>
    </head>
    <body>
        <div id="app">
            <template v-for="index of 10">
                <div class="box" ref="f_box"></div>
            </template>
            <button @click="handleClick">獲取元素</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    handleClick(){
                        console.log(this.$refs.f_box);
                        let doms=document.getElementsByClassName('box');
                        console.log(doms);
                    }
                },
                computed:{
                    
                }
                
            })
            
        </script>
    </body>
</html>

一樣仍是使用兩種方法來獲取節點，如今的話，咱們發現使用ref在v-for循環中獲取的dom元素是一個數組(集合)，原生的javascript仍是沒有變和以前的同樣

(4)綁定組件

ref強大之處不只僅表如今前三個方面，它還能夠綁定組件呢？綁定組件返回的是組件實例(組件的應用是組件的實例對象)，這個也能夠說是還有一點用處，這也是ref最後須要介紹的一項。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ref綁定組件</title>
    </head>
    <body>
        <div id="app">
            <hello ref="hello"></hello>
            <button @click="handleClick">獲取元素</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    handleClick(){
                        console.log(this.$refs.hello);
                    }
                },
                computed:{
                    
                },
                components:{
                    'hello':{
                        'template':'<div>你好</div>',
                    }
                }
            })
        </script>
    </body>
</html>