關於Vue元件實現tips的總結

本文主要介紹了詳解Vue組件實現tips的總結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

元件，顧名思義，就是把一個相對獨立，而且會多次使用的功能抽像出來，成為一個元件！如果我們要把某個功能抽象成一個元件時，要做到這個元件對其他人來說是個黑盒子，他們不用關心裡面是怎麼實現的，只需要根據約定的介面呼叫即可！

我用一張圖稍微總結了下Vue中元件的組成：

#可以看到元件中包含的東西還是蠻多的，而且，還有很多的點沒有列出來，這裡面的每一個知識點能都展開講很多。不過我們這裡不講原理，只講使用。

我們以一個tips彈跳窗為例，來綜合運用下組件的知識點。 tips彈窗，幾乎所有的框架或類別庫，都會有彈跳窗這個元件，因為彈跳窗這個功能平時非常普遍，而且模組解耦度高！

1. 介面約定

我們這裡實作的彈窗，能用到的知識點有：props, event, slot, ref等。這裡我們也能看到各個知識點是怎麼運用的。

/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {string} modal.text 模态框内容
 * @param {boolean} modal.showbtn 是否显示按钮
 * @param {string} modal.btnText 按钮文字
 */

 Vue.component('tips', {
  props : ['tipsOptions'],
  template : '#tips',

  data(){
    return{
      show : false
    }
  },

  computed:{
    tips : {
      get() {
        let tips = this.tipsOptions || {};
        tips = {
          title: tips.title || '提示',
          text: tips.text || '',
          showbtn : tips.showbtn || true,
          btnText : tips.btnText || '确定'
        };
        // console.log(tips);
        return tips;
      }
    }
  }
})

2. modal元件的實作

tips元件相對來說實作的比較簡單，僅用作提示使用者的簡單彈層。

範本：

<p class="tips" v-show="show" transition="fade">
  <p class="tips-close" @click="closeTips">x</p>
  <p class="tips-header">
    <slot name="header">
      <p class="title">{{tips.title}}</p>
    </slot>
  </p>
  <p class="tips-body">
    <slot name="body">
      <p class="notice">{{tips.text}}</p>
    </slot>
  </p>
  <p class="tips-footer">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >{{tips.btnText}}</a>
  </p>
</p>

範本中將結構分成了三個部分，標題、內容和操作區域。這裡既可以使用props傳遞字串，也可以使用slot進行客製化。

tips樣式：

.tips {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1001;
  -webkit-overflow-scrolling: touch;
  max-width: 690px;
  width: 260px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #888;
  border-radius: 4px;
}
.tips-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.tips-header{
  text-align: center;
  font-size: 25px;
}

元件內的方法：

methods:{
  closeTips(){
    this.show = false;
  },

  yes : function(){
    this.show = false;
    this.$emit('yes', {name:'wenzi', age:36}); // 触发yes事件
  },

  showTips(){
    var self = this;
    self.show = true;

    setTimeout(function(){
      // self.show = false;
    }, 2000)
  }
}

3 . 呼叫tips元件

首先我們開始渲染元件：

#

<p class="app">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showtips">显示</a>
  <tips :tips-options="tipsOptions" ref="dialog" @yes="yes" v-cloak >
    <h3 slot="header">提示标题</h3>
    <p slot="body">
      <p>hello world</p>
      <p>wenzi</p>
    </p>
  </tips>
</p>

點擊顯示按鈕後展示tips：

##

var app = new Vue({
  el : '.app',

  data : {
    tipsOptions : {
      title : 'tip'
    }
  }

  methods:{
    // 监听从组件内传递出来的事件
    yes(args){
      // console.log( args );
      alert( JSON.stringify(args) );
    },

    // 显示tips
    showtips(){
      // console.log( this.$refs );
      this.$refs.dialog.showTips();
    }
  }
})

4. 總結

#在這個簡單的tips元件裡，我們實作了用props傳遞參數，用$emit向外傳遞參數，用slot插槽來客製化內容。

要注意的是：元件props是單向綁定，也就是父元件的屬性發生變化時，子元件能接收到對應的資料變化，但反過來就會出錯。即不能在子元件中修改props傳過來的數據，來達到修改父元件屬性的目的。這是為了防止子元件無意修改了父元件的狀態。

另外，每次父元件更新時，子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop。如果你這麼做了，Vue 會在控制台給予警告。如果真的需要在子元件裡進行修改，可以用這兩種方法來應對：

定義一個局部變量，並用prop 的值初始化它：

##

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

定義一個計算屬性，處理prop 的值並回傳。

props: ['size'],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}

當然，這只是單一頁面中元件的實現，更複雜的元件後續我們也會實現。

相關建議：############PHP開發中的tips總結############css相關tips##### #######python tips######

以上是關於Vue元件實現tips的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！