2. 程式人生 > 其它 >Vue中的元件

Vue中的元件

阿新 • • 發佈：2020-12-27

技術標籤：vuevue

Vue元件化

元件的使用步驟

呼叫Vue.extend()建立一個元件構造器，在建立構造器時傳入需要使用的template模板即HTML複用的程式碼。然後呼叫Vue.component()將元件構造器註冊為一個元件，並給元件取一個標籤名稱。使用元件的標籤名在掛載的Vue例項元素下使用即可。

  1. 建立元件構造器物件

    //1.建立元件構造器物件
const cpnC = Vue.extend({
  template: `<div>
                <h2>元件標題</h2>
                <p>元件內容</p>
             </div>`
     
    
})

  2. 註冊元件

    //2.註冊元件
Vue.component('my-component', cpnC)

  3. 使用元件

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

效果截圖：[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-8d9QgklX-1608995452504)(C:%5CUsers%5C13536%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20201226182053795.png)]

全域性元件

全域性元件可以在多個Vue例項中使用，通過Vue.component()註冊的元件為全域性元件

區域性元件

在Vue例項中註冊的元件為區域性元件，只能在註冊的例項中進行使用，使用components來註冊元件

const cpnC = Vue.extend({
    template: `<div>
                  <h2>元件標題</h2>
                  <p>元件內容</p>
               </div>`
  })

const app =
 
 new Vue({
  el: '#app',
  components: {
    //元件名: 元件構造器名
    cpn: cpnC
  }
})

父子元件

如果想在元件中使用其它的元件，這兩個元件就為父子關係。先建立子元件，然後再建立父元件，在父元件中使用compoents註冊子元件就可以在template中使用子元件

<div id="app">
  <cpn-father></cpn-father>
</div>

<script src="../js/vue.js"></script>
<script>
  //子元件
  const cpnChild = Vue.extend({
    template: `<div><h1>子元件標題</h1><p>子元件內容</p></div>`
  })

  //父元件
  const cpnFather = Vue.extend({
    //在父模板中使用子元件
    template: `<div>
                <h1>父元件標題</h1>
                <p>父元件內容</p>
                <cpn-child></cpn-child>
               </div>`,
    //在父元件中註冊子元件
    components: {
      cpnChild
    }
  })

  const app = new Vue({
    el: '#app',
    components: {
      //註冊父元件
      cpnFather
    }
  })
</script>

效果

註冊元件的語法糖

// 全域性元件註冊語法糖
Vue.component('cpn', {
  template: `<div><h1>元件標題</h1></div>`
})

//區域性元件註冊語法糖
const app = new Vue({
    el: '#app',
    components: {
      cpn: {
        template: `<div><h1>元件標題</h1></div>`
      }
    }
  })

元件模板的抽離

使用<template>標籤並指定id進行對模板的抽離，註冊元件時通過id指定模板

<template id="myCpn">
  <div>
    <h1>元件標題</h1>
    <p>元件內容</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      myCpn: {
        //通過id指定模板
        template: '#myCpn'
      }
    }
  })

元件中的資料

如果想要在元件中存放資料，應該使用data()函式精選儲存，而不是data屬性，讓元件建立時保證資料的封閉。

<template id="myTemplate">
  <div>
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      myCpn: {
        template: '#myTemplate',
        //在元件中使用data()函式存放資料
        data() {
          return {
            title: "元件標題",
            content: "元件內容"
          }
        }
      }
    }
  })
</script>

元件的通訊

父子元件通訊需要使用兩種方法，一個是使用props向子元件傳遞資料，另一個是通過事件向父元件傳送訊息。

父子元件的通訊

父傳子props

在子元件中使用props宣告需要的變數，在使用元件時使用v-bind對引數進行繫結

<div id="app">
  <!-- 通過v-bind將父元件與子元件中的變數進行繫結 -->
  <cpn v-bind:c-message="message" :c-movies="movies"></cpn>
</div>

<!-- 子元件模板 -->
<template id="myTemplate">
  <div>
    <h1>{{cMessage}}</h1>
    <ul>
      <li v-for="item in cMovies">{{item}}</li>
    </ul>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  //子元件
  const cpn = {
    template: '#myTemplate',
    //父傳子宣告變數
    props: ['cMovies', 'cMessage']
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js',
      movies: ["《信條》", "《你的名字》", "《讓子彈飛》", "《阿甘正傳》", "《盜夢空間》"]
    },
    //註冊子元件
    components: {
      cpn
    }
  })
</script>

在props中可以使用陣列進行對變數的宣告，也可以使用物件的形式對資料進行限制或預設值。

注意：陣列型別或物件型別的預設值必須是一個default()函式

props: {
      cMessage: {
        //型別
        type: String,
        //預設值
        default: "暫無資料",
        //必須傳遞，否則報錯
        required: true
      },
      cMovies: {
        type: Array,
        //default函式指定預設值
        default() {
          return ['暫無資料']
        },
        required: true
      }
    }

子傳父$emit Events

子元件通過this.$emit('name', parms)傳送自定義事件，父元件通過v-on監聽子元件傳送的自定義事件來實現子元件向父元件通訊的過程。

<div id="app">
  <!-- 監聽子元件傳送的事件 -->
  <cpn @item-click="cpnClick"></cpn>
</div>

<template id="myTemplate">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  //子元件
  const cpn = {
    template: '#myTemplate',
    methods: {
      btnClick(item) {
        //傳送自定義事件
        this.$emit('item-click', item);
      }
    },
    data() {
      return {
        categories: [
          {id: '001', name: "熱門推薦"},
          {id: '002', name: "手機數碼"},
          {id: '003', name: "家用家電"},
          {id: '004', name: "電腦辦公"},
        ]
      }
    }
  }

  const app = new Vue({
    el: '#app',
    methods: {
      cpnClick(item) {
        alert("你選擇了：" + item.name);
      }
    },
    //註冊子元件
    components: {
      cpn
    }
  })
</script>

父子元件雙向繫結

實際上是通過子元件向父元件傳送事件進而修改父元件中data中的資料

<div id="app">
  <h1>父元件</h1>
  <p>num：{{num}}</p>
  <p>msg：{{msg}}</p>
  <hr>
  <!-- 繫結資料 並且 監聽事件 -->
  <cpn :message="msg"
       @message-change="msgChange"></cpn>
</div>

<template id="myTemplate">
  <div>
    <h1>子元件</h1>
    <p>message：{{dataMessage}}</p>
    <input type="text" :value="dataMessage" @input="messageInput">
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: "Hello world"
    },
    methods: {
      msgChange(value) {
        this.count = value;
      }
    },
    //子元件
    components: {
      cpn: {
        template: '#myTemplate',
        //父元件傳輸資料
        props: {
          message: String
        },
        //儲存資料
        data() {
          return {
            dataMessage: this.message
          }
        },
        //事件
        methods: {
          messageInput(event) {
            //子元件的雙向繫結
            this.dataMessage = event.target.value;
            //向父元件傳送資料
            this.$emit('message-change', this.dataMessage);
          }
        }
      }
    }
  })
</script>

父子元件的直接獲取

直接獲取即在父元件或子元件中直接獲取到子元件或父元件的物件，進而訪問起屬性和方法。

父元件獲取子元件

父元件可使用$children或$refs獲取子元件。

this.$children是一個數組，它包含了當前元件下所有的子元件，可通過遍歷的形式獲取需要的子元件。

this.$refs是一個子元件物件，需要指定元件的ref，通過$refs.xxx獲取對應的元件，從而不需要遍歷

<div id="app">
  <cpn></cpn>
  <button @click="btnClick">訪問子元件</button>
</div>

<template id="myTemplate">
  <div>
    <h1>子元件</h1>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btnClick() {
        //訪問子元件的showMessage的方法
        this.$children[0].showMessage();
      }
    },
    //註冊子元件
    components: {
      cpn: {
        template: '#myTemplate',
        data() {
          return{
            message: "Hello Vue.js"
          }
        },
        methods: {
          showMessage() {
            alert(this.message);
          }
        }
      }
    }
  })
</script>

使用refs

<cpn ref="cpn"></cpn>

呼叫形式

this.$refs.cpn.showMessage();

子元件獲取父元件

子元件可以使用$parent獲取父元件。

<body>
<div id="app">
  <cpn></cpn>
</div>

<template id="myTemplate">
  <div>
    <h1>子元件</h1>
    <button @click="btnClick">訪問父元件</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js'
    },
    //註冊子元件
    components: {
      cpn: {
        template: '#myTemplate',
        methods: {
          btnClick() {
            //訪問父元件
            alert(this.$parent.message);
          }
        }
      }
    }
  })
</script>

相關推薦

vue中元件通訊詳解(父子元件, 爺孫元件, 兄弟元件)

vue中我們常常用到元件. 那麼元件總體可以分為如下的幾種關係. 父子元件,爺孫元件,兄弟元件. 這幾種元件之間是如何通訊的呢?

vue中元件的data為什麼是一個函式

提出問題：元件的data資料為什麼必須要以函式返回的形式，為什麼不是簡單的物件形式呢？

Vue中元件

一.元件的構成 元件：由 template +css+js三部分組成(.vue檔案) 1）元件具有複用性 2) 複用元件時，資料要隔離

vue中元件繫結原生事件不生效

技術標籤：vue.js 如果在元件中，遇到繫結原生事件（click等事件）不生效的話，在事件後面+.native即可生效

詳細聊聊vue中元件的props屬性

目錄問題一：那props具體是怎麼使用呢？原理又是什麼呢？往下看問題二：那如果我們想給年齡加1歲，怎麼實現？問題三：對於年齡這一型別，我們最希望拿到的是什麼資料型別？問題四：可以限制類型，那是不是也可以限制

Vue中元件的遞迴

　　先來說下需求，就是一個表單，會有樹形結構一樣，會有子表單，表單顯示什麼內容是後臺通過介面資料來確定的；這個時候就和樹形結構一樣，肯定會有子元件的遞迴；這次是自己第一次寫遞迴，遇到了三個問題記錄下；

vue中元件的資料傳遞

1.props 父傳子 傳遞方式：父元件引入及使用子元件時，在元件標籤上使用資料繫結方式傳遞資料

轉 vue中元件的props屬性（詳）

別人責備回覆的，還是比不責備回覆的，好很多倍。就是至少回覆了的。工作有自我價值感。

Vue中keep-alive元件作用詳解

keep-alive元件的作用，供大家參考 作用：用於保留元件狀態或避免重新渲染（快取的作用）

在 Vue 中編寫 SVG 圖示元件的方法

在考慮了將向量圖示從圖示字型遷移到內聯 SVG 的 原因 之後，我在 Vue.js 中找到了一個用 SVG 替換圖示字型的解決方案，同時仍能保持使用圖示字型的靈活性和易用性——能夠使用 CSS 輕鬆改變圖示的大小、顏色以及其

Vue中使用better-scroll實現輪播圖元件

better-scroll 是什麼 better-scroll 是一款重點解決移動端（已支援 PC）各種滾動場景需求的外掛。它的核心是借鑑的 iscroll 的實現，它的 API 設計基本相容 iscroll，在 iscroll 的基礎上又擴充套件了一些 feature

vue中keep-alive內建元件快取的例項程式碼

需求： home 元件中有一個 name 的 data 資料。這個資料修改之後，再切換到其他的元件。再切換到 home 元件，希望 home 中 name 這個值是之前修改過的值。希望元件有快取。

VUE+elementui元件在table-cell單元格中繪製微型echarts圖

需求效果圖示例 實際完成效果圖 ** 程式碼實現 注：table表格為二次封裝的子元件

Vue 中如何將函式作為 props 傳遞給元件的實現程式碼

本文 GitHub https://github.com/qq44924588 ... 上已經收錄，更多往期高贊文章的分類，也整理了很多我的文件，和教程資料。歡迎Star和完善，大家面試可以參照考點複習，希望我們一起有點東西。

Vue學習-元件中的資料通訊

目錄元件可以訪問Vue例項資料嗎？元件的data引數元件中的methods函式父子元件使用場景如何通訊（傳遞資料）父傳子子傳父元件中的雙向繫結父元件訪問子元件($children或$refs)子元件訪問父元件($parent)元件的擴充套件

vue中一個元件使用多個相同子元件自適應視窗變化問題

vue中一個元件使用多個相同子元件自適應視窗變化問題 問題背景 一個元件中用了兩次自定義的table元件

Vue中的元件傳值

1.父傳子 通過props傳值 語法：v-bind:子元件props中的變數名= “父元件中的data中定義的資料”

在vue中封裝的彈窗元件使用佇列模式實現方法

前言 由於業務需要，需要在封裝的彈窗元件中引入定時器實現倒計時效果，但是如果同時觸發兩個彈窗，就會導致計時器bug，前一個彈窗的定時器沒有被清除，倒計時就會錯亂，此時想到的解決辦法就是採用佇列模式，將每一

vue中使用v-bind="$attrs"和v-on="$listeners"進行多層元件通訊

vue元件之間通訊，我們可以使用props和vuex兩種方式，但是vuex太重，props在多級元件中使用又太麻煩，vue2.4版本提供了另一種方法，使用v-bind=\"$attrs\"，將父元件中不被認為 props特性繫結的屬性傳入子元件中，通

vue中的動態元件（component & keep-alive）

　　多個元件使用同一個掛載點，並且進行動態的切換這就是動態元件。 　　通過使用<component>元素動態的繫結到它的is特性，來實現動態元件