Vue.js 組件

来源:https://www.cnblogs.com/writerW/archive/2018/05/18/9052200.html
-Advertisement-
Play Games

1. 組件介紹 組件（component），vue.js最強大的功能之一 作用：封裝可重用的代碼，通常一個組件就是一個功能體，便於在多個地方都能調用該功能體 根組件：我們實例化的Vue對象就是一個組件，且是所有組件的根組件 分類：全局組件，局部組件 註：每個組件都是Vue的實例對象 2. 全局組件 ...


1. 組件介紹

組件（component），vue.js最強大的功能之一

  • 作用：封裝可重用的代碼，通常一個組件就是一個功能體，便於在多個地方都能調用該功能體
  • 根組件：我們實例化的Vue對象就是一個組件，且是所有組件的根組件
  • 分類：全局組件，局部組件
  • 不足：跳轉時，無法傳遞參數，則無法實現同一個頁面根據不同的參數顯示不同內容

註：每個組件都是Vue的實例對象

2. 全局組件

通過Vue的靜態方法（component）定義，全可在所有組件中使用。語法如下：

<div id="app">
    <!-- 使用組件 -->
    <my-header></my-header>
</div>
<script type="text/javascript">
   //定義全局組件
   Vue.component("my-header",{
       template:"<div>我是全局組件</div>"
   })
   let app = new Vue({
        el:"#app"
　　})
</script>

3. 局部組件

在父組件的 components 屬性中定義。

3.1 定義組件對象

  • 組件對象名，採用駝峰法命名
  • 組件對象的配置項與Vue實例的配置項相似，data 數據項除外（組件對象中，data是一個方法）

3.2 定義組件模板

組件模板中，必有一個根元素，不能直接寫h1、p、span、a等內容

3.3 註冊組件

註冊組件，組件在哪裡使用，就註冊到哪裡

3.4 使用組件

定義組件時用的駝峰法，使用時將駝峰法轉換為帕斯卡命名

<div id="app">
    <!-- 4.使用組件 -->
    <my-header></my-header>
</div>
<!-- 2.定義組件模板 -->
<template id="my-header">
    <div>
        <h3>我是頭部局部組件</h3>
        <p>{{name}}</p>
    </div>
</template>
<script type="text/javascript">
    //1.定義局部組件
    let MyHeader = {
        template:'#my-header',//組件的模板，#my-header指id為my-header的模板
        data(){
            return {
                name:"局部組件"//數據項
            }
        }
    }
    let app = new Vue({
        el:"#app",
        //3.註冊組件
        components:{
            MyHeader//將MyHeader 這個組件註冊到app根組件中
        }
　　})
</script>

4. template 語法規則

組件對象的template屬性用來設置組件的模板內容，模板內容有3種寫法：

  • 直接寫在字元串中
<div id="app">
    <my-header></my-header>
</div>
<script type="text/javascript">
    let MyHeader = {
        template:'<div><h1>我是頭部局部組件：{{name}}</h1></div>',
        data(){
            return {
                name:"局部組件"
            }
        }
    }
    let app = new Vue({
        el:"#app",
        components:{
            MyHeader
        }
　　})
</script>
  • 將模板內容寫在template標簽中（例子）
  • 將模板內容寫在script標簽中
<div id="app">
    <my-header></my-header>
</div>
<script type="text/x-template" id="my-header">
    <div>
        <h3>我是頭部局部組件</h3>
        <p>{{name}}</p>
    </div>    
</script>
<script type="text/javascript">
    let MyHeader = {
        template:'#my-header',
        data(){
            return {
                name:"局部組件"
            }
        }
    }
    let app = new Vue({
        el:"#app",
        components:{
            MyHeader
        }
　　})
</script>

5. 組件間的相互通信

組件實例是孤立的，不可在子組件中直接用父組件中的數據（組件特性：高內聚、低耦合）

父組件通過 props 向下傳遞數據，子組件通過 emit 向上發射事件傳遞數據

5.1 父傳子

  • 先在父組件中定義數據

  • 在父組件的模板中，通過屬性綁定把數據綁定在子組件上，語法：子組件 :變數名=”數據項”

  • 在子組件中定義props屬性，用來接收父組件傳遞的數據

  • 在子組件模板中使用數據

  • 在子組件的函數中使用數據

<div id="app">
    {{number}}
    <!-- 2. 把數據綁定在子組件上 -->
    <my-collapse :num="number"></my-collapse>
</div>
<template id="my-collapse">
    <div>
        <!-- 4. 在子組件中使用數據 -->
        <p>{{num}}</p>
        <p>{{Say()}}</p>
    </div>    
</template>
<script type="text/javascript">
　　let MyCollapse = {
　　　　template:'#my-collapse',
　　　　props:{
            //3. 接受父組件傳遞的數據，Numder類型約束，表示傳遞過來的數值類型
　　　　　　num:{
　　　　　　　　type:Number,
　　　　　　　　default:0,
　　　　　　　　required:true
　　　　　　}
　　　　},
　　　　methods:{
            //5. 在子組件的函數中使用數據
          Say(){
             console.log(this.num)
          }
      }
   }
   let app = new Vue({
       el:"#app",
       data:{
           //1. 定義父組件的數據項
           number:1000
       },
       components:{
           MyCollapse
       }
　})
</script>

  • props細節：每個數據項，都可有3個屬性進行約束
    • type：類型約束，約束父組件給子組件傳遞的數據類型。類型包括：Object、Array、Number、String、Boolean
    • default：指定預設值，若父組件未傳遞數據，可指定預設值
    • required：指定該數據項是否必須傳遞

5.2 子傳父

  • 在子組件中添加事件監聽，通過$emit從子組件向父組件發射一個事件
  • 在父組件中接收子組件發射過來的事件，格式：<子組件 @子組件事件名=”父組件要執行的方法”>
  • 在父組件中定義方法接收子組件傳遞的事件及數據

註：子組件上的事件名@addmsg不能使用駝峰法

<div id="app">
    <p>{{content}}</p>
    <!-- 3. 在父組件中接收子組件發射過來的事件 -->
    <my-collapse @addmsg="receive"></my-collapse>
</div>
<template id="my-collapse">
    <div>
        <input v-model="msg" type="" name="">
        <!-- 2. 在子組件中添加事件監聽 -->
        <button @click="sendMsg">按鈕</button>
    </div>    
</template>
<script type="text/javascript">
    let MyCollapse = {
        template:'#my-collapse',
        data(){
            return {
                msg:''
            }
        },
        methods:{
            //1.從子組件向父組件發射事件，參數1：事件名；參數2：傳遞的數據
            sendMsg(){
                this.$emit("addmsg",this.msg)
            }
        }
    }
    let app = new Vue({
        el:"#app",
        data:{
            content:''
        },
        components:{
            MyCollapse
        },
        methods:{
            //4. 在父組件中定義方法接收子組件傳遞的事件及數據，參數是子組件傳遞的數據
            receive(d){
                return this.content=d
            }
        }
　　})
</script>

6. 插槽 slot

插槽，即一個占位符，能在不同環境下，傳遞不同的參數，並得到不同的效果，在Vue中通過slot標簽實現

思路：先在子組件中定義一個占位符（插槽），再使用真實的內容替換這個插槽

6.1 單個插槽

當子組件模板只有一個無屬性的插槽時，父組件傳入的整個內容片段將插入到插槽所在的DOM位置，並替換掉插槽本身

    <div id="app">
        <son>
            <h3>只是標題</h3>
            <p>這是段落</p>
        </son>
    </div>
    <template id="son">
        <div>
            <slot></slot>
        </div>
    </template>
    <script type="text/javascript">
        let Son = {
            template:'#son'
        }
        let app = new Vue({
            el:'#app',
            components:{
                Son
            }
        })        
    </script>

6.2 具名插槽

若有多個插槽（占位符），通過name屬性加以區分，這種插槽就是具名插槽（可更靈活的管理組件的內容）

  • 先定義插槽（占位符），即將內容不確定的地方使用插槽占個位置
  • 再使用插槽，即使用真實內容替換占位符
　　<div id="app">
        <son>
            <h3 slot="title">這是標題</h3>
            <p slot="content">這是段落</p>
        </son>
    </div>
    <template id="son">
        <div>
            <slot name="title"></slot>
            <slot name="content"></slot>
        </div>
    </template>

7. 深入理解 Vue 實例

通過 new Vue() 獲得一個對象，即 Vue實例，Vue實例提供如下屬性、方法：

7.1 Vue實例屬性

  • $el，獲取掛著 Vue 實例的元素
  • $data，獲取 Vue 實例的數據項
<div id="app"></div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            name:"David",
            age:20
        }     
    })
    console.log(app.$el);
    console.log(app.$data);
</script>

  • $refs，獲取對DOM元素的引用

Vue 側重於數據驅動，而jQuery側重於dom，Vue提供了 $refs 屬性對dom元素進行靈活的操作，具體使用：

    • 在元素上添加一個屬性ref：<標簽 ref=“keyword”
    • 在Vue實例中，通過this.$refs獲取所有的dom引用
<div id="app">
        <a href="" ref="oa">超鏈接</a>
        <button @click="setStyle">點擊切換</button>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            methods:{
                setStyle(){
                    //找到DOM節點
                    console.log(this.$refs)
                    console.log(this.$refs.oa)
                    this.$refs.oa.style.textDecoration='none'
                    this.$refs.oa.style.color='red'
                }
            }
        })        
    </script>

7.2 Vue實例方法

  • $mount，手動設置掛載點
　　<div id="app">
        {{name}}
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data:{
                name:"David"
            }
        })    
        app.$mount('#app')
    </script>
  • $watch，偵聽器，監聽數據項、計算屬性值的變化，一旦值變化，則自動調用$watch方法

將所有的非同步操作，都寫在watch裡面進行實現

　　<div id="app">
        出生年月：
        <input v-model="birthday" type="" name=""><br>
        年齡：<p>{{age}}</p>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                birthday:'',
                age:0
            },
            watch:{
                birthday(){
                    setTimeout(()=>{
                        this.age = new Date().getFullYear()-new Date(this.birthday).getFullYear();
                    },3000)
                }
            }
        })        
    </script>

8. Vue 實例的生命周期

實例化的Vue對象（根組件）以及自定義的組件對象都有生命周期，Vue 設計者為方便調試程式，提供了8個鉤子函數：

    <div id="app">
    　　{{name}}    
    </div>
    <script type="text/javascript">
        let app = new Vue({
            data:{
                name:'David'
            },
            beforeCreate(){
                alert('beforeCreate')
            },
            created(){
                alert('created')
            },
            beforeMount(){
                alert('beforeMount')
            },
            mounted(){
                alert('mounted')
            },
            beforeUpdate(){
                alert('beforeUpdate')
            },
            updated(){
                alert('updated')
            },
            beforeDestory(){
                alert('beforeDestory')
            },
            destroyed(){
                alert('destroyed')
            }
        })    
        app.$mount('#app')
        app.$destroy('name')    
    </script>

生命周期函數作用：在不同的階段，做相應的工作

  • created階段，初始化數據，創建數據對象
  • mounted階段，使用數據項替換模板，即將數據掛載到DOM元素節點上
  • updated階段，當DOM節點中的數據發生改變，在此階段進行更新

9. 動態組件

可定義多個組件，再使用 :is 屬性動態地在多個組件之間切換

語法：<component v-bind:is=”組件名”></component>

Component 相當於一個占位符，具體顯示哪個組件，通過:is指定

    <div id="app">
        <span @click="currentCom='FirstCom'">第一個</span>
        <span @click="currentCom='SecondCom'">第二個</span>
        <component :is="currentCom"></component>
    </div>
    <template id="com1">
        <div>第一個組件</div>
    </template>
    <template id="com2">
        <div>第二個組件</div>
    </template>
    <script type="text/javascript">
        let FirstCom={
            template:'#com1',
            mounted(){
                console.log("第一個被渲染")
            }
        }
        let SecondCom={
            template:'#com2',
             mounted(){
                console.log("第二個被渲染")
            }
        }
        let app = new Vue({
            el:"#app",
            data:{
                currentCom:''
            },
            components:{
                FirstCom,
                SecondCom
            }
        })
    </script>

  • keep-alive 組件

無 keep-alive 組件時，每次切換組件都重新創建一次組件，使用 keep-alive後，會將創建過的組件保存在記憶體中，以後使用時直接使用，而不會每次重新創建

    <div id="app">
        <span @click="currentCom='FirstCom'">第一個</span>
        <span @click="currentCom='SecondCom'">第二個</span>
        <keep-alive>
            <component :is="currentCom"></component>
        </keep-alive> 
    </div>
    <template id="com1">
        <div>第一個組件</div>
    </template>
    <template id="com2">
        <div>第二個組件</div>
    </template>
    <script type="text/javascript">
        let FirstCom={
            template:'#com1',
            mounted(){
                console.log("第一個被渲染")
            }
        }
        let SecondCom={
            template:'#com2',
             mounted(){
                console.log(
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android BroadcastReceiver 接收收到簡訊的廣播
    一、知識介紹 1、broadcastReceiver是廣播接受者，四大組件之一。 2、Android中內置了很多系統級別的廣播，可以在應用程式中得到各種系統的狀態信息。 3、使用場景： ①當手機沒有電時，會告知用戶“電量低”的廣播信息。可以做到正在使用的app就會接收到這個廣播消息，如果是游戲可能是 ...
  • 混合開發使用Chrome Inspect調試WebView預覽手機界面和定位元素
    使用Chrome Inspect調試混合應用可以幫助我們排查問題。例如定位元素，快速修改CSS樣式並實時查看效果。其實微信開發也是一種混合開發模式，微信可以看做一個原生的Android App搭配了一個JS運行環境（WebView），然後大家就可以愉快地使用Web前端技術（Html/Css/Js）開 ...
  • 【讀書筆記】iOS-微定位技術
    在大型商場，醫院或是大樓里，你是否曾經有過找不到想去的地方的經歷呢？這種情況下採用傳統的定位方法就有些力不從心了。首先這些地方不能採用GPS定們，而Wifi和蜂窩式行動電話基站定位誤差比較大。這種情況下的定位就叫”微定位“技術 。 微定位技術中一個比較重要的概念-地理圍欄。地理圍欄是LBS的一種新應 ...
  • JS--dom對象：document object model文檔對象模型
    dom對象：document object model文檔對象模型 文檔：超文本標記文檔 html xml 對象：提供了屬性和方法 模型：使用屬性和方法操作超文本標記性文檔 可以使用js裡面的DOM提供的對象，使用這些對象的屬性和方法，對標記性文檔進行操作 想要對標記性文檔進行操作，首先需要對標記性 ...
  • HTML和CSS基礎知識
    html基本結構<html>內容</html> html開始標記<head>內容</head> html文件頭標記<title>內容</title> htmlhtml文件標題標記<meta>內容</meta> 文件的元信息(網頁的描述信息)，必須在head元素里<body>內容</body> 文件主 ...
  • JS數據類型詳解
    JavaScript中一共有六種數據類型，其中有五種是基本的數據類型分別是：Undefined、Null、Boolean、Number和String，然後就是有一種複雜的數據類——Object。 一、認識typeof操作符 typeof可以用來檢測給定變數的數據類型。 "Undefined" 該值未 ...
  • vue項目如何刷新當前頁面
    1.場景 在處理列表時，常常有刪除一條數據或者新增數據之後需要重新刷新當前頁面的需求。 2.遇到的問題 1. 用vue-router重新路由到當前頁面，頁面是不進行刷新的 2.採用window.reload()，或者router.go(0)刷新時，整個瀏覽器進行了重新載入，閃爍，體驗不好 3.解決方 ...
  • 移動端頁面字體在微信被放大，導致排版錯亂
    在開發微信頁面的時候，之前一直沒有測出這個問題。直到某天領導的手機出現了排版錯位的問題，拿著手機質問我的工作態度。 Google了一下發現原來微信調整了字體大小會放大網頁的字體，導致排版混亂。通過設置可以禁止網頁字體被放大： 請忽略 這樣網頁就沒問題了，至少目前看來。 參考文章 "《禁用微信 web ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類