<p>以下に示すようにコンポーネントInputText.vueを作成しています。</p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<div class="行">
<div class="フォームグループ">
<h4>テキストの編集:</h4>
<textarea class="form-control"cols="50" rows="4" placeholder="ここにテキストを入力..." v-model="textBoxInput" @keyup="textChanged" ></textarea>
</div>
</div>
</div>
</テンプレート>
<スクリプト>
デフォルトをエクスポート{
データ: 関数(){
戻る {
textBoxInput: ""
}
}、
メソッド: {
textChanged: function(){
this.$emit('displayTextChanged', this.textBoxInput);
}
}
}
</script></pre>
<p>次に、これを CardFront.vue コンポーネントに次のように登録して使用します。 </p>
<pre class="brush:php;toolbar:false;"><style>
.edit-area {
パディング: 20px;
高さ: 800ピクセル;
背景色: #d2f9f9;
}
.card-display {
パディング: 20px;
高さ: 800ピクセル;
}
</スタイル>
<テンプレート>
<div class="行">
<div class="カードcol-sm-6編集エリア">
<cc-text-area></cc-text-area>
</div>
<div class="カードcol-sm-6カード-ディスプレイ""
</div>
</div>
</テンプレート>
<スクリプト>
'./TextInput.vue' から TextInput をインポートします
デフォルトをエクスポート{
コンポーネント: {
ccTextArea: テキスト入力
}
}
<script></pre>
<p>次のエラーが発生します。
エラー</p>
<p>助けてください。 Vueバージョン2を使用しています。ページを更新しようとすると、次のようなエラーが表示されます: [Vue warn]: Unknown Custom element: - コンポーネントを正しく登録しましたか?再帰コンポーネントの場合は、必ず「name」オプションを指定してください。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ファイル名とコンポーネント名が一致しているか確認してください。
「./TextInput.vue」から TextInput
リーリーをインポートするコンポーネントを使用している場合は、必ずコンポーネントに名前を付け、オプションでコメントの提案に従ってname属性を追加してください。で。この問題は解決しました。皆様、大変お世話になりありがとうございました。問題は、CardFront.vue コンポーネントの終了スクリプト タグにあります。