Vue で入力コンポーネントをカプセル化する方法のチュートリアル

小云云
リリース: 2018-01-15 14:27:56
オリジナル
3378 人が閲覧しました

この記事では、Vue での入力コンポーネントのカプセル化の詳細な例についての関連情報を主に紹介します。この記事が、必要な方の参考になれば幸いです。

Vue で入力コンポーネントをカプセル化しています

最近少し忙しくて、長い間更新していませんでした。今日は、入力コンポーネントのカプセル化をカスタマイズする方法に関する簡単なテンプレートを投稿します。プログラマは、必要なパラメータを実際のプロジェクトに追加できます

私のプロジェクトの UI ダイアグラムは次のとおりです

は次のとおりです

子コンポーネントのテンプレート設定


<template>
 <p class="completion-input-box">
  <span class="input-box-name">{{text}}</span>
  <input 
  type="text" 
  ref="input"
  :value="value"  
  @input="$emit(&#39;input&#39;, $event.target.value)"
  >
 </p>
</template>
<script>
export default {
 name: &#39;inputlsit&#39;,
 props: [&#39;text&#39;, &#39;value&#39;],
}
</script>
ログイン後にコピー

親コンポーネントのテンプレート


<template>
 <p class="completion-input-box">
  <FromList :text="&#39;创业项目名称&#39;" v-model="projectN"></FromList>
  <FromList :text="&#39;所属公司名称&#39;" v-model="companyN"></FromList>
  <FromList :text="&#39;所属投资机构名称&#39;" v-model="mechanismN"></FromList>
 </p>
</template>
<script>
import FromList from &#39;./FromList.vue&#39;
export default {
 name: &#39;search&#39;,
 data() {
  return {
   projectN: &#39;&#39;,     // 创业项目名称
   companyN: &#39;&#39;,     // 所属公司名称
   mechanismN: &#39;&#39;    // 所属机构名称
  }
 },
 components: {
  FromList
 }
}
</script>
ログイン後にコピー

関連推奨事項:

TextInputコンポーネントの詳細な紹介

WeChatミニ プログラム マテリアルデザイン - 入力コンポーネント

vue を使用してプラグインをカプセル化し、npm に公開する詳細な例

以上がVue で入力コンポーネントをカプセル化する方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!