2. 程式人生 > >vue.js進階之元件

vue.js進階之元件

阿新 • • 發佈：2019-01-08

因為之前的專案用了vue，但是是邊學邊用，很多細節都不熟悉，比如vue-router，之前也寫過vue+browserify構建大型應用。這次寫一個vue最強大的功能，就是vue的元件。
首先推薦一個部落格，真的寫得非常好，當然官方API也寫得很好。
http://www.cnblogs.com/keepfool/p/5625583.html

vue元件基本步驟

這個圖也是盜用這個部落格的，所以先宣告一下，我算是轉載吧，哈哈。
步驟：
1 、建立元件構造器
2、 註冊元件
3、在Vue例項中使用元件
這裡寫圖片描述
一個小小的demo來說明一下，這個就是官方的例子：

<div
 
 id="example">
  <my-component></my-component>
</div>
// 定義
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})

// 註冊
Vue.component('my-component', MyComponent)

// 建立根例項
new Vue({
  el: '#example'
})
<div id="example">
  <div>A custom component!</div
 
>
</div>

理解

  1. Vue.extend()是Vue構造器的擴充套件，呼叫Vue.extend()建立的是一個元件構造器。
  2. Vue.extend()構造器有一個選項物件，選項物件的template屬性用於定義元件要渲染的HTML。
  3. 使用Vue.component()註冊元件時，需要提供2個引數，第1個引數時元件的標籤，第2個引數是元件構造器。
  4. 元件應該掛載到某個Vue例項下，否則它不會生效。

屬性值的傳遞

元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。

Vue.component('child'
 
, {
  // 宣告 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模板內
  // 同樣也可以在 vm 例項中像 “this.message” 這樣使用
  template: '<span>{{ message }}</span>'
})
<child message="hello!"></child>

官網的例子。
然而如何繫結到style和id呢？

data和props

1、data

使用元件Components時，大多數選項可以被傳入到 Vue 構造器中，有一個例外： data 必須是函式。因為如果不是函式的，宣告多個元件的時候，他們共享的就是同一個data，這樣就會亂掉。如果通過函式返回，那麼每個元件維持自己的data作用域。該data屬性只在其component中可見。

<body>
    <div id="app">
        <my-component>
        </my-component>
    </div>
    <template id="myComponent">
        <div>
            <h2>{{msg}}</h2>
            <button @click="showMsg">Show Message</button>
        </div>
    </template>
</body>
<script type="text/javascript" src="../dist/vue.js"></script>
<script type="text/javascript" src="../dist/vue-router.js"></script>
<script type="text/javascript">
new Vue({
    el: '#app',
    components: {
        'my-component': {
            template: '#myComponent',
            data: function() {
                return {
                    msg: 'This is a Component!' //Vue中component的data必須通過function() return
                }
            },
            methods: {
                showMsg: function() {
                    alert(this.msg);
                }
            }
        }
    }
})
</script>

Component其他感覺和之前用的Vue沒什麼區別。
也可以有methods方法，有data，多了props

2、關於元件的作用域

template不是標準的HTML元素，瀏覽器是不理解這個元素的。
這裡寫圖片描述
這裡還可以看到template

那麼Vue是如何讓瀏覽器理解template標籤的呢：
感覺必須是掛載在Vue中，通過Vue解析出這個標籤成為瀏覽器可以理解的元素。
就像下面這段程式碼，必須新new 一個Vue，Vue使用myComponent作為components，然後在Vue繫結的app中，這個component就會被解析成瀏覽器可以閱讀的語言。

new Vue({
    el: '#app',
    components: {
        'my-component': {
            template: '#myComponent',
            data: function() {
                return {
                    msg: 'This is a Component!' //Vue中component的data必須通過function() return
                }
            },
            methods: {
                showMsg: function() {
                    alert(this.msg);
                }
            }
        }
    }
})

並且vue例項和component的作用域是獨立的

new Vue({
    el: '#app',
    data:{
        display:true //vue例項的display
    },
    components: {
        'my-component': {
            template: '#myComponent',
            data: function() {
                return {
                    msg: 'This is a Component!',
                    display: false //component中的display
                }
            },
            methods: {
                showMsg: function() {
                    alert(this.msg);
                }
            }
        }
    }
})
 <div id="app">
        <my-component v-show="display">
        </my-component>
    </div>
    <template id="myComponent">
        <div>
            <h2 v-show="display">{{msg}}</h2>
            <button @click="showMsg">Show Message</button>
        </div>
    </template>

執行結果：

這裡寫圖片描述
h2被隱藏了，
但是my-component沒有被隱藏。
也就是說：父元件模板的內容在父元件作用域內編譯；子元件模板的內容在子元件作用域內編譯
那麼父子元件如何進行通訊呢？
答案是props

3、父元件和子元件通訊

官網的一張圖
這裡寫圖片描述
父元件通過* props* 向下傳遞資料給子元件，子元件通過 events 給父元件傳送訊息。看看它們是怎麼工作的。

a. 父元素向子元素通訊：props

還是剛剛的例子，我們在component中添加了props
例子1：靜態props

new Vue({
    el: '#app',
    data:{
        display:true
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props:['parentmsg'], //宣告props
            data: function() {
                return {
                    msg: 'This is a Component!',
                    display: false //Vue中component的data必須通過function() return
                }
            },
            methods: {
                showMsg: function() {
                    alert(this.msg);
                }
            }
        }
    }
})

我們在template中加了一個p，這個p引用父元素的msg，另外說一聲Vue中屬性繫結這個不識別大小寫

<my-component v-show="display" parentMsg="ParentMsg">

在瀏覽器看到就是

<my-component v-show="display" parentmsg="ParentMsg">

所以即使你聲明瞭props：[‘parentMsg’]也顯示不出來。我的程式碼是這樣

後來看到官方的解釋是這樣的：

HTML 特性不區分大小寫。當使用非字串模版時，prop的名字形式會從 camelCase 轉為
kebab-case（短橫線隔開）

 <div id="app">
        <my-component v-show="display" parentmsg="ParentMsg">
        </my-component>
    </div>
    <template id="myComponent">
        <div>
            <h2 v-show="display">{{msg}}</h2>
            <p>{{parentmsg}}</p> 
            <button @click="showMsg">Show Message</button>
        </div>
    </template>

執行結果
這裡寫圖片描述
這裡就是父元素的ParentMsg傳遞給了component

例子2：動態props
感覺神奇之處就在這裡，用v-bind把剛剛的props繫結起來

<input type="" name="" v-model="ParentMsg">
        <my-component v-show="display" v-bind:parentmsg="ParentMsg">
        </my-component>
    </div>

這樣ParentMsg就根據輸入框中的ParentMsg動態變化了。

new Vue({
    el: '#app',
    data:{
        display:true,
        ParentMsg:"Hello This is Parent"
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props:['parentmsg'],
            data: function() {
                return {
                    msg: 'This is a Component!',
                    display: false //Vue中component的data必須通過function() return
                }
            },
            methods: {
                showMsg: function() {
                    alert(this.msg);
                }
            }
        }
    }
})

prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。

另外，每次父元件更新時，子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop 。如果你這麼做了，Vue 會在控制檯給出警告。

通常有兩種改變 prop 的情況：

  1. prop 作為初始值傳入，子元件之後只是將它的初始值作為本地資料的初始值使用；

  2. prop 作為需要被轉變的原始值傳入。

 <div id="app">
    <input type="" name="" v-model="ParentMsg">
        <my-component v-show="display" v-bind:parentmsg="ParentMsg">
        </my-component>
    </div>
    <template id="myComponent">
        <div>
            <h2 v-show="display">{{msg}}</h2>
            <p>{{parentmsg}}</p>
            <p>{{childprops}}</p>
            <button @click="showMsg">Show Message</button>
        </div>
    </template>
new Vue({
    el: '#app',
    data:{
        display:true,
        ParentMsg:"Hello This is Parent"
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props:['parentmsg'],
            data: function() {
                return {
                    msg: 'This is a Component!',
                    childprops:"child:"+this.parentmsg, //可以在data中獲取props，並生成新的data
                    display: false //Vue中component的data必須通過function() return
                }
            },
            methods: {
                showMsg: function() {
                    alert(this.msg);
                }
            }
        }
    }
})

a. 子元素向父元素傳遞資訊：自定義事件

我們知道，父元件是使用 props 傳遞資料給子元件，但如果子元件要把資料傳遞回去，應該怎樣做？那就是自定義事件！

使用 $on(eventName) 監聽事件 
使用 $emit(eventName) 觸發事件
 <button-counter v-on:increment="incrementTotal"></button-counter>
Vue.component('button-counter', {
    template: '<button v-on:click="increment">{{counter}}</button>',
    data: function() {
        return {
            counter: 0
        }
    },
    methods: {
        increment: function() {
            alert("increment")
            this.counter += 1;
            this.$emit('increment');
        }
    }
})
new Vue({
    el: '#app',
    data: {
        display: true,
        ParentMsg: "Hello This is Parent",
        total: 0
    },
    methods: {
        incrementTotal: function() {
            alert("incrementTotal")
            this.total += 1;
        }
    },
})

先執行increment，再執行incrementTotal
感覺這兩句是非常重要的：

v-on:increment="incrementTotal"
this.$emit('increment');

分析，button上面綁定了v-on:click=”increment”，當點選按鈕觸發increment事件，當increment函式執行完畢，觸發incrementTotal函式。全在於 this.$emit(‘increment’); 不然執行完畢increment就完畢了。
官網的例子：

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

這裡寫圖片描述
這樣點選任意一個button都會呼叫 incrementTotal。

input v-model="something">

其實v-model僅僅是一顆語法糖

<input v-bind:value="something" v-on:input="something = $event.target.value">

所以要讓元件的 v-model 生效，它必須：

1.接受一個 value 屬性
2. 在有新的 value 時觸發 input 事件

<div id="app2">
        <currency-input label="Price" v-model="price"></currency-input>  
        <currency-input label="Shipping" v-model="shipping"></currency-input>
        <currency-input label="Handling" v-model="handling"></currency-input>
        <currency-input label="Discount" v-model="discount"></currency-input>
        <p>Total: ${{ total }}</p>
    </div>
    <template id="myComponent">
        <div>
            <h2 v-show="display">{{msg}}</h2>
            <p>{{parentmsg}}</p>
            <p>{{childprops}}</p>
            <button @click="showMsg">Show Message</button>
        </div>
    </template>
Vue.component('currency-input', {
  template: '\
    <div>\
      <label v-if="label">{{ label }}</label>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        v-on:focus="selectAll"\
      >\
    </div>\
  ',
  props: {
    value: {
      // type: Number,
      default: 0
    },
    label: {
      // type: String,
      default: ''
    }
  },
  methods: {
    updateValue: function (value) {
      this.$emit('input', value) //觸發input事件
    },
    selectAll: function (event) {
      setTimeout(function () {
        event.target.select()
      }, 0)
    }
  }
})

new Vue({
  el: '#app2',
  data: {
    price: 0,
    shipping: 0,
    handling: 0,
    discount: 0
  },
  computed: {
    total: function () {
      return ((
        this.price * 100 + 
        this.shipping * 100 + 
        this.handling * 100 - 
        this.discount * 100
      ) / 100).toFixed(2)
    }
  }
})

使用slot

相關推薦

vue.js進階之元件

因為之前的專案用了vue，但是是邊學邊用，很多細節都不熟悉，比如vue-router，之前也寫過vue+browserify構建大型應用。這次寫一個vue最強大的功能，就是vue的元件。 首先推薦一個部落格，真的寫得非常好，當然官方API也寫得很好。 htt

Vue進階之元件（二）

什麼是slot 官網API的說法是： 在使用元件時，常常要像這樣組合它們： <app> <app-header></app-header> <app-footer><

最新妙堂Vue.JS進階深造高級視頻課程

第三方插件 工具 *** ref 服務器 腳手架 get js進階 link 視頻課程介紹 本套課程共計 4 個階段，共計 38 節課，分別從 “vue-cli 腳手架、vue-router、vuex、axios 服務器通信” 這四大塊為大家詳細講解 vue 的相關知識體系

vue學習進階：元件入門練習到使用vue-cli開發

新建index.html，直接複製以下程式碼，雙擊瀏覽器執行即可。程式碼包含Vue的元件使用，可對照練習。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

2019最全妙堂Vue.JS進階深造高階課程

視訊課程介紹 本套課程共計 4 個階段，共計 38 節課，分別從 “vue-cli 腳手架、vue-router、vuex、axios 伺服器通訊” 這四大塊為大家詳細講解 vue 的相關知識體系。 視訊教程從 vue 的入門開始，即 “響應式資料繫結、可組合的檢視元件”，學習 MVVM 思想

Android開發高階進階之元件化框架搭建

背景 當一個專案經過N手人開發，N個產品經理的蹂躪，N長時間的維護，此時一定存在大量程式碼冗餘、業務耦合、專案臃腫，資原始檔大把重複等等，不堪重負。當需要增加新功能或者修改之前某個功能的時候，我相信很多同仁都說只敢增加，不敢隨意的去刪除、修改原有的程式碼，因為不知道哪些有用，哪些沒有用。

Vue.js進階【2-0】Vue 建構函式的引數

Vue的建構函式至關重要！ 裡面的引數也數量眾多，完整的引數列表可以參考：官方的Vue建構函式API 這篇文章以超級大白話，超級簡單的程式碼展示了Vue的建構函式、建構函式的引數、執行過程等等，可以說非常棒的一篇文章！ 這裡僅僅把最常用的引數，以及這背後的Vue理念

Vue基礎進階 之 Vue生命周期與鉤子函數

ext style 博客園 方法 itl methods 但是 不能 鉤子方法 Vue生命周期 Vue生命周期：Vue實例從創建到銷毀的過程，稱為Vue的生命周期； Vue生命周期示意圖：https://cn.vuejs.org/v2/guide/instan

（十二）vue.js元件——元件進階之slot插槽

概述 我們已經知道，現在的web應用及其頁面，基本都是由各個元件組合形成，那麼這個時候我們【如何較好的組合各個元件】就成為了我們需要關心的問題了 場景 想象下，對於各個元件組合使用的場景，如果我們要在佈

Vue.js學習記錄-5-Vue進階：元件

6.元件 - 計數器Demo為例 元件使用細節 全域性元件 and 區域性元件 全域性元件： // 全域性元件(子元件) Vue.component('row', {

No.03---Vue進階之模塊化組織

謝謝 zh-cn ram set vuex msg mit methods span 前兩篇講解了一下 Vuex 的基本使用方法，可是在實際項目中那麽寫肯定是不合理的，如果組件太多，不可能把所有組件的數據都放到一個 store.js 中的，所以就需要模塊化的組織 V

JSjs進階--之JS三大家族：offset家族 Scroll家族 client家族

有單位 特殊 獲得 avi 1.4 tex 直接 成了 獲取網頁 1.1 三大家族和一個事件對象 三大家族（offset/scroll/client） 事件對象/event （事件被觸動時，鼠標和鍵盤的狀態）（通過屬性控制） 1.2 Offset家族簡介 offse

【我的Android進階之旅】自定義控制元件之使用ViewPager實現可以預覽的畫廊效果，並且自定義畫面切換的動畫效果的切換時間

我們來看下效果 在這裡，我們實現的是，一個ViewPager來顯示圖片列表。這裡一個頁面，ViewPage展示了前後的預覽，我們讓預覽頁進行Y軸的壓縮，並設定透明度為0.5f,所有我們看到gif最後，左右兩邊的圖片有點朦朧感。讓預覽頁和主頁面有主從感。我們用分

Three.js進階篇之2

動畫原理 在這裡，我們將動態畫面簡稱為動畫（animation）。正如動畫片的原理一樣，動畫的本質是利用了人眼的視覺暫留特性，快速地變換畫面，從而產生物體在運動的假象。而對於Three.js程式而言，動畫的實現也是通過在每秒中多次重繪畫面實現的。 為了衡量畫面切換速度

Android進階之自定義View實戰(一)仿iOS UISwitch控制元件實現

一.引言 個人覺得，自定義View一直是Android開發最變換莫測、最難掌握、最具吸引力的地方。因為它涉及到的知識點比較多，想在實際應用中駕輕就熟，由淺入深，你需要掌握以下知識點: 1. View的繪製機制以及Canvas、Paint、Rect等的常用方

Three.js進階篇之7

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body {margin: 0;} body, html {overflow: hidden

【我的Android進階之旅】Android自定義電池控制元件

一、背景 最近公司有個業務，需要自定義一個電池控制元件，因此自己按照UI圖編寫了一個自定義View。 二、效果 三、實現過程 首先看下視覺給出的UI效果圖 從這裡我們可以看得出來，要自定義這個電池View的話，分為3部分來

JS的進階之路(一)

JS中的資料型別 JS中基本資料型別分為原始資料型別(5種)和物件型別(1種)。對應的分別是 String， Number， Boolean ，Null ，Undefined 和object。   (

第三章——vue、d3進階之完整的柱狀圖

1、效果圖，圖中有資料值，x軸座標,y軸軸 2、程式碼 <template> <div id="mydiv"> <!-- <svg> <rect></rect> <

[JS進階] HTML5 之文件操作(file)

版本 無效 tran ssl idt 無法讀取 bin erl this 版權聲明：本文為博主原創文章。未經博主同意不得