2. 程式人生 > >深入理解Vue.js元件！

深入理解Vue.js元件！

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

元件

Vue.js引入的元件，讓分解單一HTML到獨立元件成為可能。元件可以自定義元素形式使用，或者使用原生元素但是以is特性做擴充套件。

註冊和引用

使用元件之前，首先需要註冊。可以註冊為全域性的或者是區域性的。全域性註冊可以使用:

Vue.component(tag, options)

註冊一個元件。tag為自定義元素的名字，options同為建立元件的選項。註冊完成後，即可以<tag>形式引用此元件。如下是一個完整可執行的案例：

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
 
<divid="app"><tag></tag></div><script>Vue.component('tag',{
    template:`<div>one component rule all other<div>`})newVue({
    el:"#app"});</script>
你也可以區域性註冊，這樣註冊的元件，僅僅限於執行註冊的Vue例項內：

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><div
 
id="app"><tag></tag></div><script>var tag ={
      template:`<div>one component rule all other<div>`}newVue({
      el:"#app",
      components:{tag}});</script>

我們注意到，<tag>是HTML本身並不具備的標籤，現在由Vue的元件技術引入，因此被稱為是自定義標籤。這些自定義標籤的背後實現常常是標籤、指令碼、css的集合體。它的內部可以非常複雜，但是對外則以大家習慣的簡單的標籤呈現。通過本節這個小小案例，元件技術帶來的抽象價值已經展現出來一角了。

動態掛接

多個元件可以使用同一個掛載點，然後動態地在它們之間切換。元素<component>可以用於此場景，修改屬性is即可達成動態切換的效果：

<componentv-bind:is="current"></component>

假設我們有三個元件home、posts、archives，我們可以設定一個定時器，每隔2秒修改一次current，把三個元件的逐個切入到當前掛接點：

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><divid="app"><componentv-bind:is="current"></component></div><script>var app =newVue({
  el:'#app',
  data:{
    current:'archive',
    i :0,
    b :['home','posts','archive']},
  components:{
    home:{ template:'<h1>home</h1>'},
    posts:{ template:'<h1>posts</h1>'},
    archive:{template:'<h1>archive</h1>'}},
  methods:{
    a(){this.i =this.i %3this.current =this.b[this.i]this.i++
      setTimeout(this.a,2000)}},
  mounted(){
    setTimeout(this.a,2000)}})</script>

引用元件

一個父元件內常常有多個子元件，有時候為了個別處理，需要在父元件程式碼內引用子元件例項。Vue.js可以通過指令v-ref設定元件的識別符號，並在程式碼內通過$refs+識別符號來引用特定元件。接下來舉例說明。

假設一個案例有三個按鈕。其中前兩個按鈕被點選時，每次對自己的計數器累加1；另外一個按鈕可以取得前兩個按鈕的計數器值，並加總後設置{{total}}的值。此時在第三個按鈕的事件程式碼中，就需要引用前兩個按鈕的例項。程式碼如下：

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><divid="app">
  {{ total }}
  <countref="b1"></count><countref="b2"></count><buttonv-on:click="value">value</button></div><script>Vue.component('count',{
  template:'<button v-on:click="inc">{{ count }}</button>',
  data:function(){return{count:0}},
  methods:{
    inc:function(){this.count+=1}},})newVue({
  el:'#app',
  data:{total:0},
  methods:{
    value:function(){this.total =this.$refs.b1.count+this.$refs.b2.count
    }}})</script>

標籤button使用ref設定兩個按鈕分為為b1、b2，隨後在父元件程式碼內通過$refs引用它們。

元件協作

按照元件分解的願景，一個大型的HTML會按照語義劃分為多個元件，那麼元件之間必然存在協作的問題。Vue.js提供的協作方式有屬性傳遞、事件傳遞和內容分發。

使用屬性

此方法用於父元件傳遞資料給子元件。每個元件的作用域都是和其他元件隔離的，因此，子元件不應該直接訪問父元件的資料，而是通過屬性傳遞資料過來。如下案例傳遞一個字串到子元件：

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><divid="app"><childmessage="hello"></child></div><script>Vue.component('child',{
    props:['message'],
    template:'<span>{{ message }}</span>'})newVue({el:'#app'})</script>

本案例會顯示

hello

在頁面上。這裡，父元件為掛接在#app上的Vue例項，子元件為child。child使用props宣告一個名為message的屬性，此屬性把父元件內的字串hello傳遞資料到元件內。

如果不是傳遞一個靜態的字串，而是傳遞JavaScript表示式，那麼可以使用指令v-bind:

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><divid="app"><childv-bind:message="hello+',world'"></child></div><script>Vue.component('child',{
    props:['message'],
    template:'<span>{{ message }}</span>'})newVue({
    el:'#app',
    data:{hello:'hi'}})</script>

執行結果為：

hi,world

本案例把父元件內的hello成員傳遞給子元件。出現在屬性內的hello不再指示字面上的字串，而是指向一個表示式，因此傳遞進來的是表示式的求值結果。

屬性驗證

當通過屬性傳遞表示式時，有些時候型別是特定的，Vue提供了屬性的驗證，包括型別驗證，範圍驗證等。比如傳遞年齡進來的話，要求應該是整數。案例如下：

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><divid="app"><childv-bind:age="age"></child></div><script>Vue.component('child',{
    props:{'age':Number},
    template:'<span>you are {{ age }}</span>'})newVue({
    el:'#app',
    data:{age:'30'}})</script>

如果你使用的是開發版本的vue.js，那麼會在控制檯得到一個警告,Vue 將拒絕在子元件上設定此值：

[Vue warn]:Invalid prop: type check failed for prop "age".ExpectedNumber, got String.(found in component <child>)

當把age的那一行修改為數字，即：

data:{age:30}

警告就會消失。屬性名稱後可以加入型別，型別檢查除了使用Number，還可以有更多，完整型別列表如下：

StringNumberBooleanFunctionObjectArray

你還可以在屬性名後跟一個物件，在此物件內指定範圍檢查，提供預設值，或者要求它是必選屬性：

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><divid="app"><childv-bind:age="age"></child></div><script>Vue.component('child',{
    props:{'age':{
              type:Number,
              validator:function(value){return value >0&& value<150},
              required:true,default:50}},
    template:'<span>you are {{ age }}</span>'})newVue({
    el:'#app',
    data:{age:'149'}})</script>

官方手冊提供了一個相對全面的驗證樣例：

Vue.component('example',{
  props:{// 基礎型別檢測 （`null` 意思是任何型別都可以）
    propA:Number,// 多種型別
    propB:[String,Number],// 必傳且是字串
    propC:{
      type:String,
      required:true},// 數字，有預設值
    propD:{
      type:Number,default:100},// 陣列／物件的預設值應當由一個工廠函式返回
    propE:{
      type:Object,default:function(){return{ message:'hello'}}},// 自定義驗證函式
    propF:{
      validator:function(value){return value >10}}}})

使用事件

每個Vue例項都有事件介面，元件是一個具體的Vue例項，因此也有事件介面，用來發射和接收事件，具體事件如下：

  1. 發射事件:$on(event)

  2. 接收事件:$emit(event)

我們假設一個案例來說明事件通訊。此案例中，有一個父元件繫結在#app上，還有兩個按鈕元件，點選任何一個按鈕讓自己的計數器加1，並且讓父元件內的一個計數器加1。圖例：

{%}

使用一個案例，來演示事件的使用：

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><divid="app">
  {{ total }}
  <countref="b1"></count><countref="b2"></count></div><script>Vue.component('count',{
  template:'<button v-on:click="inc">{{ count }}</button>',
  data:function(){return{count:0}},
  methods:{
    inc:function(){this.count+=1this.$emit('inc')}},})newVue({
  el:'#app',
  data:{
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
深入理解Vue.js元件！

     
 
                

元件

Vue.js引入的元件，讓分解單一HTML到獨立元件成為可能。元件可以自定義元素形式使用，或者使用原生元素但是以is特性做擴充套件。

註冊和引用

使用元件之前，首先需要註冊。可以註冊為全域性的或者是區域性的。全域性註冊可以使用:
Vue.co 



  
 

    


    
    
Vue.js 元件中的v-on繫結自定義事件理解

     
 
							
							
							每個 Vue 例項都實現了事件介面(Events interface)，即：

使用 $on(eventName) 監聽事件

使用 $emit(eventName) 觸發事件

Vue的事件系統分離自瀏覽器的EventTarget API。儘管它們的執行類似， 



  
 

    


    
    
Vue.js理論！

     
 響應式   交互   mvvm模式   指定   {}   htm   模式   mod   viewmodel   
 1、拋開手動操作DOM的思維，Vue.js是數據驅動的，你無需手動操作DOM。2、將DOM和數據綁定起來，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。3、MVVM模式（M 



  
 

    


    
    
深入理解VUE樣式style層次分析

     
 包含關系   strong   靜態   tro   spa   size   組件   簡單   文檔   　　剛開始使用vue的時候容易被裏面的樣式搞懵：
　　樣式可以在main.js中引入，在模塊js文件中引入，在組件中的style標簽引入，在組件中的script標簽引入，還可以在index.html的 



  
 

    


    
    
比官方文檔更易懂的Vue.js教程！包你學會！

     
 那是   服務器   描述   mac   ima   -a   sta   都在   route   歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐幹貨哦~

本文由蔡述雄發表於雲+社區專欄
蔡述雄，現騰訊用戶體驗設計部QQ空間高級UI工程師。智圖圖片優化系統首席工程師，曾參與《眾妙之門》書籍的翻譯工作 



  
 

    


    
    
深入理解vue中Props屬性

     
 mss   command   mman   理解   多個   prop   重復   item   cin   使用 Props 傳遞數據
組件實例的作用域是孤立的。這意味著不能並且不應該在子組件的模板內直接引用父組件的數據。可以使用 props 把數據傳給子組件。
“prop” 是組件數據的一個字段，期 



  
 

    


    
    
如何對第一個Vue.js元件進行單元測試 （上）

     
 　　首先，為什麼要單元測試元件？ 
　　單元測試是持續整合的關鍵。通過專注於小的、獨立的實體，確保單元測試始終按預期執行，使程式碼更加可靠，你可以放心地迭代你的專案而不必擔壞事兒。 
　　單元測試不僅限於指令碼。可以獨立測試的任何東西都是可單元測試的，只要你遵循一些好的做法。這些例項包括單一責任、可預測性和鬆 



  
 

    


    
    
如何對第一個Vue.js元件進行單元測試 （下）

     
 我們的首次測試 
   讓我們來寫首個測試。我們首先需要使用shallowMount手動掛載我們的元件，並將其儲存在我們將執行斷言的變數中。我們還可以通過propsData屬性傳遞道具作為物件。

   已安裝的元件是一個物件，它有一些實用方法： 
 
   然後，我們可以寫第一個斷言： 
 
   讓我們來 



  
 

    


    
    
Vue.js元件間通訊方式總結

     
 　　平時在使用Vue框架的業務開發中，元件不僅僅要把模板的內容進行復用，更重要的是元件之間要進行通訊。元件之間通訊分為三種：父-子；子-父；跨級元件通訊。下面，就元件間如何通訊做一些總結。 
1.父元件到子元件通過props通訊 
在元件中，使用選項props來宣告需要從父級元件接受的資料，props的值可以 



  
 

    


    
    
深入理解Vue router的部分高階用法

     
  
  
  
 今天要介紹的是路由元資訊，滾動行為以及路由懶載入這幾個的使用方法。 
 1.路由元資訊 
 什麼是路由元資訊，看看官網的解釋，定義路由的時候可以配置 meta 欄位可以匹配meta欄位，那麼我們該如何使用它，一個簡單的例子，改變瀏覽器title的值。下面上程式碼。 
 //簡單的我就不寫了直 



  
 

    


    
    
聊聊Vue.js元件間通訊的幾種姿勢

     
  
 
 寫在前面 
 因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js原始碼，並做了總結與輸出。 
 文章的原地址：https://github.com/answershuto/learnVue。 
 在學習過程中，為Vue加上了中文的註釋htt 



  
 

    


    
    
深入解析vue.js響應式原理與實現

     
  
 
  
  vue.js響應式原理解析與實現。angularjs是通過髒檢查來實現資料監測以及頁面更新渲染。之後，再接觸了vue.js，當時也一度很好奇vue.js是如何監測資料更新並且重新渲染頁面。vue.js響應式原理解析與實現 
  
 Object.defineProperty 
 es5新增了 



  
 

    


    
    
深入解析vue.js資料繫結操作

     
  
 
 廢話不多說，直接進入正題！！！ 
  
 資料繫結 
  
  響應式的資料繫結系統。建立繫結之後，DOM將和資料保持同步，無須手動維護DOM。使程式碼能夠更加簡潔易懂、提升效率。 
  
 資料繫結語法 1.文字插值 {{ }}Mustache標籤 
 <span>Hello　{{ n 



  
 

    


    
    
深入理解Vue的生命週期

     
 　　談到Vue的生命週期，相信許多人並不陌生。但大部分人和我一樣，只是聽過而已，具體用在哪，怎麼用，卻不知道。我在學習vue一個多禮拜後，感覺現在還停留在初級階段，對於mounted這個掛載還不是很清楚。放大說，對vue的生命週期不甚瞭解，這對後面的踩坑是相當不利的。 
因為我們有時候會在幾個鉤子函式裡做一些 



  
 

    


    
    
說說 Vue.js 元件

     
  
 
  
  
  
 使用 Vue.js 元件，可以提高控制元件及其 JS 能力的可複用性。 
 1 定義第一個元件 
 Vue.js 元件需要註冊後才可以使用，註冊分為全域性註冊和區域性註冊。全域性註冊後，任何 vue 例項都可以用這個元件。 
 html： 
 <div id="app"> 



  
 

    


    
    
比官方文件更易懂的Vue.js教程！包你學會！

     
 歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~

本文由蔡述雄發表於雲+社群專欄


蔡述雄，現騰訊使用者體驗設計部QQ空間高階UI工程師。智圖圖片優化系統首席工程師，曾參與《眾妙之門》書籍的翻譯工作。目前專注前端圖片優化與新技術的探研。

2016年，乃至接下來整個2017年，如果你要問前端技術 



  
 

    


    
    
深入解析Vue.js中v-bind v-model的使用和區別

     
  
 
  
  
 v-model 指令在表單控制元件元素上建立雙向資料繫結,所謂雙向繫結，指的就是我們在js中的vue例項中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的資料 
  
 最基礎的就是實現一個聯動的效果 
 <body>
  < 



  
 

    


    
    
深入理解vue中的slot與slot-scope （簡單易懂）

     
 
                走在前端的大道上

插槽，也就是slot，是元件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父元件來決定。 實際上，一個slot最核心的兩個問題在這裡就點出來了，是顯示不顯示和怎樣顯示。

由於插槽是一塊模板，所以，對於任何一個元件，從模板種類的角度來分，其實都可以 



  
 

    


    
    
vue.js元件化開發

     
 
                Vue.extend()

元件化開發是Vue.js非常重要的一個特性，我們可以將一個頁面視作一個大的根元件，裡面所包含的元素就是不同的子元件，子元件可以在不同的根元件裡被呼叫。我們通常會在一個頁面中宣告一個Vue例項new Vue({})作為跟元件，生成能被反覆使用的子元件 



  
 

    


    
    
Vue.js元件基礎

     
  
 
 
 通過事件向父級元件傳送訊息 
 在我們開發元件時，它的一些功能有可能要求我們與父元件進行溝通。例如我們可能會引入一個可訪問性的功能來放大博文的字號，同時讓頁面的其他部分保持預設的字號。 
 這裡主要通過的是$emit方法，該方法可以傳送要呼叫的函式名稱，這個類似於事件通知系統。觸發該事件的元件呼