Vue.js基礎語法（二）組件

時間  2020-06-04
標籤 vue.js vue 基礎 語法 組件 欄目 JavaScript 简体版
原文   原文鏈接

vue學習的一系列，所有來自於表哥---表嚴肅，是我遇到過的講課最通透，英文發音最好聽的老師，想一塊兒聽課就去這裏吧 https://biaoyansu.com/i/hzhj1206html

 

把一段常常要用的東西封裝成一個組件，就能夠重複使用它，很方便的擴充它。vue

組件具備可重用性、可維護性。數組

 

1組件定義

Vue.component('組件名稱',{安全

　　template:'組件內容',app

　　methods:{函數

　　　　方法定義...學習

　　}this

});spa

 

例：3d

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>組件</title>
    </head>
    <body>
        <div id="app">
            <alert></alert>
            <alert></alert>
            <alert></alert>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('alert',{ template:'<button @click="on_click">彈出層組件</button>', methods:{ on_click:function(){ alert("你好"); } } }); var app=new Vue({ el:'#app' }) </script>
</html>

 

注意<alert></alert>要放在id爲app的div中，就是要給組件一個域。

 

組件的好處就是，能夠在頁面中放多個，每個的功能都相同，在頁面中僅僅寫了一堆標籤，但其背後的功能會很強大。

 

2全局和局部組件

2.1全局組件

全局組件就像全局變量同樣，不安全，例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>組件2-局部組件</title>
    </head>
    <body>
        <div id="seg1">
            <alert></alert>
        </div>
        <div id="seg2">
            <alert></alert>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('alert',{ template:'<button @click="on_click">彈出層組件</button>', methods:{ on_click:function(){ alert("你好"); } } }); new Vue({ el:'#seg1' }) new Vue({ el:'#seg2' }) </script>
</html>

 

2.2局部組件

若是一個組件肯定只存在某一個域中，就要定義成局部組件，

例：在域#seg1中，定義組件components，鍵名就是組件名：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>組件2-局部組件</title>
    </head>
    <body>
        <div id="seg1">
            <c-alert></c-alert>
        </div>
        <div id="seg2">
            <c-alert></c-alert>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var component_alert = { template: '<button @click="on_click">彈出層組件</button>', methods: { on_click: function() { alert("你好"); } } } new Vue({ el: '#seg1', components: { 'c-alert': component_alert } }) new Vue({ el: '#seg2' }) </script>
</html>

能夠看到，組件只在#seg1中起做用，在#seg2中報錯了。

局部組件較經常使用。

 

3組件配置

實例：點贊組件，點擊贊數+1，再點-1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>配置組件</title>
        <style> .liked_btn { background: #FF69B4;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <like></like>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('like', { template: '<button :class="{liked_btn:liked}" @click="toggle_like()">贊 {{like_count}}</button>', data: function() { return { like_count: 10, //點贊次數
 liked: false, //判斷是否點過
 } }, methods: { toggle_like: function() { if (!this.liked) { this.like_count++; } else { this.like_count--; } this.liked = !this.liked; } } }) new Vue({ el: '#app', data: { } }) </script>
</html>

 

template中的內容能夠放在 ``(反引號) 中，就能夠斷行了，也能夠寫在html中，放在template標籤中：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>配置組件</title>
        <style> .liked_btn {background: #FF69B4;}
        </style>
    </head>
    <body>
        <div id="app">
            <like></like>
        </div>
        
        <template id="like-component-tpl">
            <button :class="{liked_btn:liked}" @click="toggle_like()">贊 {{like_count}}</button>
        </template>
        
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('like', { template: '#like-component-tpl', data: function() { return { like_count: 10, //點贊次數
 liked: false, //判斷是否點過
 } }, methods: { toggle_like: function() { if (!this.liked) { this.like_count++; } else { this.like_count--; } this.liked = !this.liked; } } }) new Vue({ el: '#app', data: { } }) </script>
</html>

 

4組件傳參

4.1父子通訊（父向子傳參）

Web裏面的component其實就是一些自定義標籤，背後有一些自定義功能。一樣一個component在不一樣的情境下，它的表現不必定是同樣的，有時但願給component傳一個參數，就能夠將裏面的一些代碼重用起來。

例：上次作的點擊彈出組件，若是彈出的信息是能夠變化的就更好了，

Vue提供了一個屬性props，值是一個數組，裏面就是要傳進來的東西：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>父子通訊</title>
    </head>
    <body>
        <div id="app">
            <alert msg="11111"></alert>
            <alert msg="22222"></alert>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('alert',{ template:'<button @click="on_click()">點擊彈出</button>', props:['msg'], methods:{ on_click:function(){ alert(this.msg); } } }); var app=new Vue({ el:'#app', data:{ } }) </script>
</html>

 

例2：（注意轉義字符）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>父子通訊2</title>
    </head>
    <body>
        <div id="app">
            <user username='張三'></user>
            <user username='李四'></user>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('user',{ template:'<a :href="\'/user/\'+username">{{username}}</a>', props:['username'] }); var app=new Vue({ el:'#app', data:{ } }) </script>
</html>

 

4.2子父通訊（子向父傳參）

例：點擊按鈕顯示餘額

經過$emit觸發一個事件，並傳參，而後在父組件上監聽這個事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子父通訊</title>
    </head>
    <body>
        <div id="app">
            <balance></balance>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('balance',{ template:` <div>
                <show @show-balance="show_balance"></show>
                <div v-if="show">餘額爲：10000</div>
            </div>
 `, data:function(){ return{ show:false } }, methods:{ show_balance:function(data){ this.show=true; console.log(data); } } }); Vue.component('show',{ template:'<button @click="on_click()">顯示餘額</button>', methods:{ on_click:function(){ this.$emit('show-balance',{a:1,b:2}); } } }); var app=new Vue({ el:'#app' }) </script>
</html>

 

按鈕是一個子組件，外面是一個父組件，在子組件觸發事件，父組件接收事件；並經過函數傳遞數據，注意父組件中的show_balance不加括號。

 

子組件向父組件喊話就是經過事件的方式。

 

4.3任意及平行組件間通訊

實例，定義兩個組件，一個組件從input輸入內容，另外一個組件實時顯示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>平行組件間通訊</title>
    </head>
    <body>
        <div id="app">
            <xiaomei></xiaomei>
            <dashuai></dashuai>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var Event=new Vue(); Vue.component('xiaomei',{ template: `<div> 請輸入：<input @keyup="on_change" v-model="i_said"/>
            </div>`,
 data:function(){ return{ i_said:'' } }, methods:{ on_change:function(){ Event.$emit('xiaomei-said-con',this.i_said) } } }); Vue.component('dashuai',{ template:` <div>已接收：{{xiaomei_said}}</div>
 `, data:function(){ return{ xiaomei_said:'' } }, mounted:function(){ var me=this; Event.$on('xiaomei-said-con',function(data){ me.xiaomei_said=data; }) } }); new Vue({ el:'#app' }) </script>
</html>

說明：

定義一個外部的東西-事件的調度器Event，

在輸入組件xiaomei中定義keyup事件，事件調用的方法中，用Event調用$emit觸發一個事件，第一個參數是事件名稱，自定義，第一個參數是數據，也就是this.i_said，

在接收內容的組件dashuai中去監聽這個事件，用屬性mounted（表明組件初始化完成就監聽，具體查看組件的生命週期），用Event.$on，第一個參數是事件的名稱（上面定義的xiaomei-said-con），第二個參數是一個回調函數，函數的參數就是data，就是傳過來的數據。注意Event.$on中再用this就不表明組件了，表明Event，能夠在上面把this定義成一個變量me，再me.xiaomei_said=data。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程