コンポーネントを呼び出す vuejs メソッド

Vuejs によるコンポーネント呼び出し方法: 1. v-model または .sync を通じてコン​​ポーネントの表示と非表示を明示的に制御します; 2. js コードを通じて呼び出します; 3. Vue 命令を通じて呼び出します。

この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue コンポーネントの 3 つの呼び出しメソッド

最近 fj-service-system を書いているときにいくつかの問題に遭遇しました。つまり、ダイアログやメッセージなどの一部のコンポーネントについては、element-ui などのサードパーティ コンポーネント ライブラリを導入する必要があるのでしょうか、それとも自分で実装する必要があるのでしょうか?オンデマンドで導入する機能はありますが、全体的なスタイルが私のシステム全体と一致しません。したがって、これらの単純なコンポーネントを自分で手動で実装することを検討できます。

通常、Vue に関する記事を読むと、Vue の単一ファイル コンポーネントの開発ページについて書かれていることがほとんどです。単一コンポーネント開発に関する記事は比較的少ないです。 fj-service-system プロジェクトに取り組んでいたとき、単一コンポーネントの開発も非常に興味深いことに気づきました。書き留めて記録することができます。私が書いたものはUIフレームワークではなく単なる記録であり、githubリポジトリもないのでコードを見てみましょう。

#v-model または .sync はコンポーネントの表示と非表示を明示的に制御します
• js コードを介した呼び出し
• Vue 命令を介した呼び出し

コンポーネントを書くとき、多くの書き方やインスピレーションは element-ui から得られます。ありがとうございます。

ダイアログ

私はこれをダイアログ ボックスと呼ぶことに慣れていますが、実際にはモーダル (ポップアップ ウィンドウ) コンポーネントとも呼ばれます。実際、ページ上に小さなウィンドウがポップアップし、この小さなウィンドウ内のコンテンツをカスタマイズできます。通常、ログイン機能のダイアログ ボックスとして使用できます。

この種のコンポーネントは、v-model または .sync を通じて表示と非表示を明示的に制御するのに非常に適しています。ページに直接記述して、データを通じて制御できます。これは、Vue の設計思想に最もよく適合するコンポーネントでもあります。

このために、Dialog.vue

<template>
  <div class="dialog">
    <div class="dialog__wrapper" v-if="visble" @clcik="closeModal">
      <div class="dialog">
        <div class="dialog__header">
          <div class="dialog__title">{{ title }}</div>
        </div>
        <div class="dialog__body">
          <slot></slot>
        </div>
        <div class="dialog__footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
    <div class="modal" v-show="visible"></div>
  </div></template><script>
  export default {    name: &#39;dialog&#39;,    props: {      title: String,      visible: {        type: Boolean,        default: false
      }
    },    methods: {      close() {        this.$emit(&#39;update:visible&#39;, false) // 传递关闭事件
      },      closeModal(e) {        if (this.visible) {          document.querySelector(&#39;.dialog&#39;).contains(e.target) ? &#39;&#39; : this.close(); // 判断点击的落点在不在dialog对话框内，如果在对话框外就调用this.close()方法关闭对话框
        }
      }
    }
  }</script>

というコンポーネントを作成できます。

CSS などは書きません。コンポーネント自体とはほとんど関係ありません。ただし、上記の Dialog__wrapper クラスも全画面かつ透過的であることに注意してください。主にクリック イベントを取得し、クリック位置をロックするために使用されます。DOM の Node.contains() メソッドを使用して、クリックされたかどうかを判断します。半透明のモーダル レイヤーなど、ダイアログの外側をクリックすると、close イベントが送出され、ダイアログが閉じられます。

これを外部から呼び出したい場合は、次のように呼び出すことができます:

<template>
  <div class="xxx">
    <dialog :visible.sync="visible"></dialog> 
    <button @click="openDialog"></button>
  </div></template><script>
  import Dialog from &#39;Dialog&#39;
  export default {    components: {
      Dialog
    },    data() {      return {        visible: false
      }
    },    methods: {      openDialog() {        this.visible = true // 通过data显式控制dialog
      }
    }
  }</script>

ダイアログの開閉をより魅力的にするには、300ff3b250bc578ac201dd5fb34a00048ce19d539aa010eae4ae47ee5160671c

这样的方式来实现调用一个loading组件了。

总结

在用Vue写我们的项目的时候，不管是写页面还是写形如这样的功能型组件，其实都是一件很有意思的事情。本文介绍的三种调用组件的方式，也是根据实际情况出发而实际操作、实现的。不同的组件通过不同的方式去调用，方便了开发人员，也能更好地对代码进行维护。当然也许还有其他的方式，我并没有了解，也欢迎大家在评论里指出！

最后再次感谢element-ui的源码给予的极大启发。

推荐：《最新的5个vue.js视频教程精选》

以上がコンポーネントを呼び出す vuejs メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。