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

この記事は主に、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('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. モーダルコンポーネント

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('yes', {name:'wenzi', 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 : '.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. 概要

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

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

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

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

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

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

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

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

関連する推奨事項:

PHP 開発のヒントのまとめ

CSS 関連のヒント

Python のヒント

以上がVue コンポーネント実装のヒントのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。