六角Vue筆記_元件

10 min readMar 3, 2019

元件概念介紹/ 使用 x-template 建立元件/ 使用 function return 建構資料格式/ props 基本觀念/ props 使用上的注意事項/ props 型別及預設值/ emit 向外層傳遞事件/ Slot 元件插槽/ 使用 is 動態切換元件

以下筆記出自六角學院課程，詳情請參➤ 六角學院-Vue 出一個電商網站

▶︎ 元件概念介紹

元件可獨立運作且可重複使用，元件資料皆為獨立。

外層side變更資料時便即時Props更新到內層元件，內層外為Emit Event，必須觸發事件才會將資料傳到外層，因此並非即時的。

＊SPA也是透過元件製作（由前端所模擬的路由）

▶︎ 使用 x-template 建立元件

在一個 <script> 元素中，並為其帶上 text/x-template 的類型，然後通過一個 id 將模板引用過去。x-template 需要定義在 Vue 所屬的 DOM 元素外。

//script<script type=”text/x-template” id=”hello-world-template”>
  <p>Hello hello hello</p>
</script>//componentVue.component('hello-world', {
   template: '#hello-world-template' })

全域註冊：使用Vue.component()建立，此元件大家都可以使用。

區域註冊：註冊在應用程式內的components才能被使用

覺得不錯的文章1、覺得不錯的文章2

▶︎ 使用 function return 建構資料格式

一個元件的 data 必須是一個函數，因此每個實例可以維護一份被返回對像的獨立的拷貝。

Vue.component(‘counter-component’, {  data: function(){return {counter: 0}},  template: ‘#counter-component’})
_____!NG data: {counter: 0},

▶︎ props 基本觀念

<div id=”app”>
  <h2>靜態傳遞</h2>
  <photo img-url=”圖片網址"></photo> //透過字串直接將資料傳入props中<h2>動態傳遞</h2>
  <photo :img-url=”url”></photo> //動態資料，會在屬性前加上:
在元件中動態的給到一個imgUrl而這個imgUrl對應到元件外面,所傳遞進來的 (:img-url="url") 資料
</div>//x-template
<script type=”text/x-template” id=”photo”>
  <div>
    <img :src=”imgUrl” class=”img-fluid” alt=”” /> //動態載入的資料
    <p>風景照</p>
  </div>
</script><script>
Vue.component(‘photo’, {
  props:[‘imgUrl’],
  template: ‘#photo’})var app = new Vue({
  el: ‘#app’,
  data: {url: ‘圖片網址'}});
</script>

▶︎ props 使用上的注意事項

單向數據流

Vue 架構上的設計，元件本身都是屬於雙向綁定，只有針對 props 是單向數據流，為了避免內層直接操作外層資料。

Vue.component(‘photo’, {
  props: [‘imgUrl’],
  template: ‘#photo’,
  data: function () {
    return {  newUrl:this.imgUrl  }}})
//定義一個新的newUrl（由props的imgUrl傳進來的），來接收外部傳來的props<script type="text/x-template" id="photo">
  <div>
    <img :src="imgUrl" class="img-fluid" alt="" />
    <input type="text" class="form-control" v-model="newUrl">
//將imgUrl替換為newUrl
  </div>
</script>

物件傳參考特性&尚未宣告的變數

<div class=”col-sm-4">  <card :user-data=”user” v-if=”user.phone”></card>
//若資料傳入有時間差，可以使用v-if讓元件的產生時間往後移，假設user的某個特性尚未讀入就不要顯示</div>

維持狀態與生命週期

Vue.component(‘keepCard’, { 
//每次新建元件時都會呼叫ajax，造成資料更新，若不希望發生這種狀況  template: ‘#card’,
  data: function () {
    return {user: {}}},
  created: function () {
    var vm = this;
    $.ajax({
        url: ‘https://randomuser.me/api/',
        dataType: ‘json’,
        success: function (data) {
        vm.user = data.results[0];}});}});
_____<div class="col-sm-4">
  <keep-alive>
    <keep-card  v-if="isShow"></keep-card>
  </keep-alive>
</div>
//加入 <keep-alive> 保持資料狀態

▶︎ props 型別及預設值

傳入props就給資料定義型別，避免傳入錯誤的資料內容

//html
<div id=”app”>
  <prop-type></prop-type>
  <prop-type cash=”300"></prop-type> //靜態屬性傳入的就會是字串
  <prop-type :cash=”300"></prop-type> //動態就依定義型別
</div>//x-template
<script type=”text/x-template” id=”propType”>
  <div>
  <input type=”number” class=”form-control” v-model=”newCash”>
    {{ typeof(cash)}}
  </div>
</script><script>
  Vue.component(‘prop-type’, {
    props: {
      cash: {
      type: Number, //定義型別
      default: 300 }}, //預設值    template: ‘#propType’,
      data: function () {
      return {newCash: this.cash}}}); //單向數據流調整var app = new Vue({
  el: ‘#app’,
  data: {
    cash: 300}});</script>

▶︎ emit 向外層傳遞事件

vm.$emit( eventName, […args] )參數：
{string} eventName
[…args]
觸發當前實例上的事件。附加參數都會傳給監聽器回調。

範例

//html
<div id=”app”>
  我透過元件儲值了 {{ cash }} 元
  <button-counter v-on:increment=”incrementTotal”></button-counter>
  //自訂要觸發事件名稱和方法（此處指得是app中的累加）
</div>//元件
<script>
  Vue.component(‘buttonCounter’, {
    template: `<div><button @click=”incrementCounter” class=”btn btn-outline-primary”>增加 {{ counter }} 元</button>
  <input type=”number” class=”form-control mt-2" v-model=”counter”>
 </div>`,    data: function() {
      return { counter: 1 }},    methods: {
      incrementCounter:function(){
        this.$emit(‘increment’,Number(this.counter))
//指得是外層v-on的increment事件，並帶入元件內的參數counter}}});var app = new Vue({
  el: ‘#app’,
  data: { cash: 300 },
  methods: { //累加的方法
    incrementTotal: function(newNumber){
    this.cash=this.cash +newNumber;}}});
</script>

▶︎ Slot 元件插槽

作用：替換元件部分內容，因為直接在元件標籤內新增內容的話會被模版直接替換。

//html
<single-slot-component>
  <p>使用這段取代原本的 Slot。</p> //欲插入的內容
</single-slot-component>//js 欲插入的內容會取代<slot>中的預設文字（也可以不預設）
<script type="text/x-template" id="singleSlotComponent">
  <div class="alert alert-warning">
    <h6>我是一個元件</h6>
    <div>如果沒有內容，則會顯示此段落。</div>
    <slot><p>slot中的預設文字</p></slot> 
  </div>
</script>
_____//具名插槽，加入slot和name屬性對應
<named-slot-component>
  <header slot=”header”>替換的 Header</header>
  <footer slot=”footer”>替換的 Header</footer>
</named-slot-component><script type=”text/x-template” id=”namedSlotComponent”>
  <slot name=”header”>這段是預設的文字</slot>
  <slot name=”footer”>這是預設的 Footer</slot>
</script>

▶︎ 使用 is 動態切換元件

//一般元件
<primary-component :data=”item”></primary-component>//使用is表示元件
<div is=”primary-component” :data=”item”></div>//click搭配v-if切換元件狀態，然而當元件數量一多，使用許多v-if反而麻煩
<primary-component :data=”item” v-if=”current === ‘primary-component’”></primary-component>
<danger-component :data=”item” v-if=”current === ‘danger-component’”></danger-component>//使用:is動態切換元件
<div :is=”current” :data=”item”></div>

六角Vue筆記_元件

Written by Huang Pei

No responses yet