Vue コンポーネント実装のヒントのまとめ-jsチュートリアル-php.cn

Vue コンポーネント実装のヒントのまとめ

小云云

リリース： 2017-12-28 13:46:59

オリジナル

1854 人が閲覧しました

この記事は主に、Vue コンポーネントを実装するためのヒントを詳しくまとめて紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

コンポーネントは、その名前が示すように、複数回使用される比較的独立した関数をコンポーネントに抽象化することです。特定の関数をコンポーネントに抽象化したい場合は、このコンポーネントを他のコンポーネントにとってブラックボックスにする必要があります。コンポーネントがどのように実装されているかを気にする必要はなく、合意されたインターフェイスに従って呼び出すだけで済みます。

Vue のコンポーネントの構成を図を使って簡単にまとめました。

コンポーネントにはかなり多くのものが含まれており、リストされていない点がまだたくさんあることがわかります。一つの知識点について言えます。ただし、ここでは原則について説明するのではなく、使用方法についてのみ説明します。

以下のコンポーネントの知識ポイントを包括的に適用するためのヒントポップアップウィンドウを例に挙げてみましょう。ヒントポップアップウィンドウ、ほとんどすべてのフレームワークまたはクラスライブラリにはポップアップウィンドウコンポーネントがあります。これは、ポップアップウィンドウ関数は通常非常に一般的であり、モジュールは高度に分離されているためです。

1. インターフェイス規約

ここで実装するポップアップウィンドウには、props、event、slot、ref などが含まれます。ここでは、各知識ポイントがどのように使用されるかについても確認できます。

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

 Vue.component(&#39;tips&#39;, {
  props : [&#39;tipsOptions&#39;],
  template : &#39;#tips&#39;,

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

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

ログイン後にコピー

2. モーダルコンポーネント

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>

ログイン後にコピー

構造は、タイトル、コンテンツ、操作領域の 3 つの部分に分かれています。ここでは、小道具を使用して文字列を渡すことも、スロットを使用してカスタマイズすることもできます。

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(&#39;yes&#39;, {name:&#39;wenzi&#39;, age:36}); // 触发yes事件
  },

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

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

ログイン後にコピー

3. ヒントコンポーネントを呼び出します

まず、コンポーネントのレンダリングを開始します:

<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>

ログイン後にコピー

後でヒントを表示します：

var app = new Vue({
  el : &#39;.app&#39;,

  data : {
    tipsOptions : {
      title : &#39;tip&#39;
    }
  }

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

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

ログイン後にコピー

4. 概要

この単純なヒントコンポーネントでは、props を使用してパラメータを渡し、$emit を使用してパラメータを外部に渡し、スロットを使用してコンテンツをカスタマイズします。

コンポーネントのプロパティは一方向のバインディングであることに注意してください。つまり、親コンポーネントのプロパティが変更されると、子コンポーネントは対応するデータ変更を受け取ることができますが、その結果、エラーが発生します。つまり、親コンポーネントのプロパティを変更するという目的を達成するために、props によって渡されたデータを子コンポーネントで変更することはできません。これは、子コンポーネントが親コンポーネントの状態を誤って変更するのを防ぐためです。

さらに、親コンポーネントが更新されるたびに、子コンポーネントのすべての props が最新の値に更新されます。これは、子コンポーネント内の props を変更すべきではないことを意味します。これを行うと、Vue はコンソールで警告を出します。サブコンポーネントを本当に変更する必要がある場合は、次の 2 つの方法を使用して対処できます:

ローカル変数を定義し、prop の値で初期化します:

props: [&#39;initialCounter&#39;],
data: function () {
 return { counter: this.initialCounter }
}

ログイン後にコピー

計算されたプロパティを定義し、 prop と return の値。

props: [&#39;size&#39;],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}

ログイン後にコピー

もちろん、これは 1 つのページにコンポーネントを実装しただけです。将来的には、より複雑なコンポーネントも実装する予定です。