Web インタビュー Vue カスタム コンポーネントと呼び出しメソッド

// 表示するコンポーネントをインポートします。import mymodel from '../components/mymodel.vue'
エクスポートデフォルト{
  インストール: 関数 (Vue) {
    // 1.0 mymodel コンポーネントオブジェクトのコンストラクタを取得します。const Mymodel = Vue.extend(mymodel)
    // すべてのvueインスタンスにメソッド$modelを追加します
    Vue.prototype.$model = 関数 () {
      // コンポーネントを表示するには: mymodel
      // 2.0 コンポーネントオブジェクトを作成する const obj = new Mymodel()
      // 3.0 コンポーネントを表示する obj.show = true
      // 4.0 コンポーネントオブジェクトの HTML 構造を取得します。const html = obj.$mount().$el
      // 5.0 ページに HTML 構造をレンダリングします document.body.append(html)
    }
  }
}

<テンプレート>
  <div>
    <h3>通常のコンポーネントメソッドで呼び出す</h3>
    <button @click="fn1">モデルを表示</button>
    <!-- <mymodel :value="show" @input="val => (show = val)"></mymodel> -->
    <mymodel v-model="表示"></mymodel>
    <!-- sync: パラメータがコンポーネントに渡されます: xxx コンポーネントからイベントを受信しました: update:xxx イベントにより xxx が自動的に変更されます -->
    <!-- v-model: パラメータがコンポーネントに渡されます: value イベントがコンポーネントから受信されます: 入力イベントによって value が自動的に変更されます -->
    <h3>js で呼び出す</h3>
    <button @click="fn2">モデルを表示</button>
  </div>
</テンプレート>
<スクリプト>
'../../components/mymodel.vue' から mymodel をインポートします。
エクスポートデフォルト{
  データ （） {
    戻る {
      表示:偽
    }
  },
  メソッド: {
    fn1() {
      this.show = true
    },
    fn2() {
      // js メソッド this.$model() を通じてコン​​ポーネントを直接表示します。
    }
  },
  コンポーネント:
    私のモデル: 私のモデル
  }
}
</スクリプト>

<スタイル></スタイル>