技術文章 » 元件是vue的特性嗎

元件是vue的特性嗎

2022-07-21 22:00:32

元件是vue的特性，它是Vue最強大的功能之一。在Vue中，元件可以擴充套件HTML元素，封裝可重用的程式碼；在較高層面上，元件是自定義元素，Vue的編譯器為它新增特殊功能；在有些情況下，元件也可以是原生HTML元素的形式，以is特性擴充套件。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

Vue.js 是一個優秀的前端介面開發 JavaScript 庫，它之所以非常火，是因為有眾多突出的特點，其中主要的特點有以下幾個。

1) 輕量級的框架

Vue.js 能夠自動追蹤依賴的模板表示式和計算屬性，提供 MVVM 資料繫結和一個可組合的元件系統，具有簡單、靈活的 API，使讀者更加容易理解，能夠更快上手。

2) 雙向資料繫結

宣告式渲染是資料雙向繫結的主要體現，同樣也是 Vue.js 的核心，它允許採用簡潔的模板語法將資料宣告式渲染整合進 DOM。

3) 指令

Vue.js 與頁面進行互動，主要就是通過內建指令來完成的，指令的作用是當其表示式的值改變時相應地將某些行為應用到 DOM 上。

4) 元件化

元件（Component）是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼。在較高層面上，元件是自定義元素，Vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生 HTML 元素的形式，以 is 特性擴充套件。

在 Vue 中，父子元件通過 props 傳遞通訊，從父向子單向傳遞。子元件與父元件通訊，通過觸發事件通知父元件改變資料。這樣就形成了一個基本的父子通訊模式。

在開發中元件和 HTML、JavaScript 等有非常緊密的關係時，可以根據實際的需要自定義元件，使開發變得更加便利，可大量減少程式碼編寫量。

元件還支援熱過載（hotreload）。當我們做了修改時，不會重新整理頁面，只是對元件本身進行立刻過載，不會影響整個應用當前的狀態。CSS 也支援熱過載。

元件的優勢：

  • 降低整個系統的耦合度，在保持介面不變的情況下，我們可以替換不同的元件快速完成需求，例如輸入框，可以替換為日曆、時間、範圍等元件作具體的實現

  • 偵錯方便，由於整個系統是通過元件組合起來的，在出現問題的時候，可以用排除法直接移除元件，或者根據報錯的元件快速定位問題，之所以能夠快速定位，是因為每個元件之間低耦合，職責單一，所以邏輯會比分析整個系統要簡單

  • 提高可維護性，由於每個元件的職責單一，並且元件在系統中是被複用的，所以對程式碼進行優化可獲得系統的整體升級

5) 使用者端路由

Vue-router 是 Vue.js 官方的路由外掛，與 Vue.js 深度整合，用於構建單頁面應用。Vue 單頁面應用是基於路由和元件的，路由用於設定存取路徑，並將路徑和元件對映起來，傳統的頁面是通過超連結實現頁面的切換和跳轉的。

6) 狀態管理

狀態管理實際就是一個單向的資料流，State 驅動 View 的渲染，而使用者對 View 進行操作產生 Action，使 State 產生變化，從而使 View 重新渲染，形成一個單獨的元件。

初識VUE元件應用

範例化多個vue物件

用new建立多個vue物件並命名，可以通過變數相互存取

例子：物件2修改物件1的name變數

<!-- 第一個根元素 -->
<div id="vue-app-one">這裡是：{{name}}</div> 

<!-- 第二個根元素 -->
<div id="vue-app-two">
    <p>這裡是：{{name}}</p><br>
    <button @click="changeName">change-one-name</button>
    <!-- 點選後修改vue-app-one的name值-->
</div>
 // 第一個vue物件
var one = new Vue({
    el:"#vue-app-one",
    data:{
        "name":"ccy1"
    }
})

 // 第二個vue物件
var two = new Vue({
    el:"#vue-app-two",
    data:{
        "name":"ccy2"
    },
    methods:{
        // 修改vue-app-one的name為'ccy333'
        changeName:function(){
            one.name = 'ccy333'
        }
    }
})

效果：點選後修改」ccy1「為」ccy333「

在這裡插入圖片描述

全域性元件

定義與使用

  • 定義全域性元件，需給元件一個名字，呼叫時，將元件名當作標籤名使用；相當於自定義標籤，該標籤下可以包含很多子html標籤；
  • 這些子html標籤定義在元件的template屬性中，每次呼叫該元件，都渲染template裡的標籤
  • template裡必須只有一個根元素
  • 在元件中，data是函數，將資料return回去
  • 依然可以用this來呼叫data中定義的資料

例子：

定義元件：

① 定義一個元件，命名為my-component
② 其中包含資料：name和方法：changeName
③ 渲染出的html效果有一個p標籤，包含一個按鈕，點選按鈕時，修改name
④ 命名規範：camelCase (駝峰命名法) 與kebab-case (短橫線分隔命名)

  • 當寫成標籤時，遇到有大寫字母的命名，需要改成小寫並用橫杆連結前後兩個部分，如定義元件時命名為myComponent，寫成標籤時應寫成<my-component>；
  • 元件定義時也可以用橫杆法命名；
  • 如果定義時用myComponent，標籤用<my-component>是OK的，系統自動識別
// 自定義的全域性元件my-component
// template中只有一個根元素p標籤，裡面包含一個button按鈕
Vue.component('my-component',{
    template:`<p>
        我的名字是：{{name}}
        <button @click='changeName()'>btn</button>
        </p>`,
    data(){
        return {
            name:'ccy'
        }
    },
    methods:{
        changeName:function(){
            this.name = '安之'
        }
    }
})
// vue物件1
new Vue({
    el:"#vue-app-one",
})
// vue物件2
new Vue({
    el:"#vue-app-two",
})

使用元件：

① 在vue物件對應的根元素（el指定標籤）下使用
② 由於定義的是全域性元件，所以可以在任意的vue物件下使用
③ 元件可複用，在一個vue物件下可以使用多次，且元件間互相獨立

<div id="vue-app-one">
    <my-component></my-component>
    <my-component></my-component>
</div> 

<div id="vue-app-two">
    <my-component></my-component>
</div>

效果：

在這裡插入圖片描述

data是一個函數

在vue物件中，data屬性值是一個物件，比如這樣的：

在這裡插入圖片描述

但是在全域性元件中，同一份data可能被多個vue物件使用，每個物件不單獨維護一份data時，如果某一個vue物件修改了data中的一個變數，其他vue物件獲取data時就會被影響；

如果用上面的例子做案例，若元件中的data是物件（參照），其他地方均不改變，兩個vue物件便共用同一個name變數；當我通過其中一個vue物件改變name資料時（即點選任一個btn按鈕），另一個物件獲得的name也發生了改變（其他按鈕處的’ccy’也都被改成了’安之’）

因此，為保證資料的獨立性，即每個範例可以維護一份被返回物件的獨立的拷貝，data為每個範例都return一份新建立的資料，不同的vue物件獲取的data均互不影響

在vscode中不允許元件中的data是物件，會報錯：

[Vue warn]: The 「data」 option should be a function that returns a per-instance value in component definitions.

區域性元件

  • 區域性元件註冊在某個vue物件中，
  • 只有註冊過該區域性元件的vue物件才能使用這個區域性元件

例子：

區域性元件定義：

// template僅一個根元素：ul
var msgComponent = {
	// 資料是自身提供的 (hobbies)
    template:`<ul><li v-for='hobby in hobbies' v-bind:key='hobby.id'>{{hobby}}</li></ul>`,
    data(){
        return {
            hobbies:['看劇','看動漫','吃好吃的']
        }
    }
}

註冊區域性元件：

// 僅由註冊過該區域性元件的vue物件才能使用，此處為div#vue-app-one
// 注意命名規範，components中物件的key將會被作為標籤名，多個單詞拼接的命名需使用橫杆法
// 可以寫成msg-component，此處直接簡化了命名為msg，
new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent
    }
})

html檔案中使用<msg></msg>：

<div id="vue-app-one">
    <p>這裡是vue-app-one</p>
    <mycomponent></mycomponent>
    <mycomponent></mycomponent>
    <p>我的愛好：</p>
    <msg></msg> <!--使用區域性元件-->
</div>

效果： 紅框圈出的部分就是區域性元件渲染出來的

1.png

父向子傳值/傳參照：prop

靜態傳值

建立子元件：

var titleComponent = {
    props:["title"],
    template:`<p>{{title}}</p>`
    // 所需要的資料title由父元件提供
}

在父元件的components屬性中註冊子元件：

new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent,
        "titleComponent":titleComponent
    },
})

在父元件上使用子元件：

<!-- div#vue-app-one為父元件 -->
<div id="vue-app-one">
    <p>這裡是vue-app-one</p>
    <mycomponent></mycomponent>
    <mycomponent></mycomponent>
	<!--使用子元件title-component，並傳值"我的愛好："給子元件-->
    <title-component title="我的愛好："></title-component>
    <msg></msg>
</div>

效果：紅框標記處就是父向子傳值並展示

2.png

動態傳值：v-bind

定義子元件：

var titleComponent = {
    props:["title"],
    template:`<p>{{title}}</p>`
}

在父元件的components屬性中註冊子元件：

new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent,
        "titleComponent":titleComponent
    },
    data(){
        return {
            title:"my hobbies are ",
        }
    }
})

使用子元件，通過繫結父元件data中的變數title來實現動態傳值：

<!-- div#vue-app-one為父元件 -->
<div id="vue-app-one">
    <p>這裡是vue-app-one</p>
    <mycomponent></mycomponent>
    <mycomponent></mycomponent>
    <!-- 動態繫結title -->
    <title-component v-bind:title="title"></title-component>
    <msg></msg>
</div>

效果：紅框處就是動態繫結獲取資料的展示

3.png

傳遞陣列等複雜資料時，也可以使用v-bind來動態傳值，如：
需要向子級傳遞hobbies陣列，在vue範例物件（父）中建立資料hobbies：

new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent,
        "titleComponent":titleComponent
    },
    data:{
        title:"my hobbies are ",
        hobbies:['看劇','看動漫','吃好吃的'], //需要向子元件傳遞的資料
    }
})

定義子元件：

var msgComponent = {
    template:`
            <p>{{hobby}}</p>
            `,
    props:["hobby"],
    data(){
        return {   
        }
    }
}

使用子元件：

<!-- div#vue-app-one為父元件 -->
<div id="vue-app-one">
    <p>這裡是vue-app-one</p>
    <mycomponent name="ccy"></mycomponent>
    <mycomponent name="ccy"></mycomponent>
    <title-component v-bind:title="title"></title-component>
    <!-- 動態傳值：hobbies -->
    <msg v-for="hobby in hobbies" v-bind:hobby="hobby" v-bind:key="hobby.id"></msg>
</div>

效果：

4.png

跳回「一點想法」處

子向父：事件傳值$emit

子元件不能通過prop向父元件傳遞資料，需要使用事件向父元件丟擲一個值，告知父元件我需要實現一個功能，由父元件處理這個事件

例子：點選按鈕，改變名稱chinesename
（由於data變數名不支援chinese-name形式，花括號裡不支援chineseName形式，所以這裡我都用了小寫，此處記錄一下，日後學到了新知再來填坑）

先在父元件的data中定義chinesename的初始值：

new Vue({
    el:"#vue-app-one",
    data:{
         chinesename:"anzhi" // chinesename初始值
    }
})

建立子元件，並註冊事件change-name（就像click事件一樣，需要讓系統能夠辨認這是一個事件並監聽，當事件被觸發時，執行某項約定好的操作）：

  Vue.component('blog-post', {
    props: ['chinesename'],
    template: `
      <div class="blog-post">
        <h4>{{ chinesename }}</h4>
        <button v-on:click='$emit("change-name","ruosu")'>
            修改名字
        </button>
      </div>
    `
    // blog-post元件包含一個h4，顯示chinesename，和一個按鈕
    // 點選這個按鈕，觸發change-name事件，將"ruosu"作為引數傳遞給指定的處理常式onChangeName
  })

在父元件中使用子元件，定義change-name的處理常式為onChangeName：

<div id="vue-app-one">
    <p>這裡是vue-app-one</p>
	<!-- v-bind：通過prop給子元件傳遞chinesename的初始值 -->
	<!-- v-on：子元件通過$emit給父元件傳遞新的chinesename的值 -->
	<div id="blog-posts-events-demo">
	      <blog-post
	        v-bind:chinesename='chinesename'
	        v-on:change-name = "onChangeName"
	      ></blog-post>
	</div>
</div>

在父元件處定義事件處理常式onChangeName：

new Vue({
    el:"#vue-app-one",
    data:{
          chinesename:"anzhi"
    },
    methods:{
        onChangeName:function(value){
        	// 將chinesename換成傳遞過來的資料
            this.chinesename=value
        }
    }
})

效果：

在這裡插入圖片描述

一點想法

關於父子元件的區分，在此寫一點總結，還是日後學了新知識再來填坑

官網中沒有很明確指明兩者的定義和區別，在網上搜了一圈，覺得比較多人認可並且好理解的是：

  • el指定的根元素為父元件（使用之處為父元件）
  • vue範例物件也可看做元件

在前面這些父子傳值的例子中，我們可以看到，對於區域性元件，我們會在某個html根元素中註冊並使用，所以此時el指定的根元素在html檔案中是這個區域性元件的父元件，區域性元件在html使用時便是這個父元件的一份子，承擔資料傳輸的責任
跳轉到父向子動態傳值案例

5.png

6.png

再用繞口令說一波，即：title-component元件定義處與使用處，兩者身份是不一樣的，在定義處，它是區域性元件，也是子元件，需註冊才能使用；在使用處，它是根元素的包含一部分，根元素為父元件，而「它」，承擔著父元件與子元件資料溝通的重任

這個總結在全域性元件情況下也適用，使用該全域性元件的根元素是父元件，如上面的子向父傳值的案例，p#vue-app-one是父元件，<blog-post></blog-post>作為父子元件溝通的橋樑，全域性元件blog-post為子元件

圖示：

7.png


如果是子元件又巢狀了子元件，被巢狀的元件是子子元件，以此類推

【相關視訊教學推薦：、】

以上就是元件是vue的特性嗎的詳細內容，更多請關注TW511.COM其它相關文章！