vue.js コンポーネントを作成する
コンポーネントは再利用可能なvueインスタンス。
何度も使うコードをコンポーネント化して再利用が簡単にできる。
受け取ったデータを処理して返すなどの処理もできるが、今回は文字を登録しておくだけ。
コンポーネントファイルの作成
child.vue などの名前でコンポーネントファイルを作成する。
複数作っていくことになるのでプロジェクト内の/componentsフォルダに保存しよう。
<template>
<p>text here</p>
</template>
コンポーネントの呼び出し
呼び出し元は"親コンポーネント"、呼び出される側は"子コンポーネント"と呼ばれる。
親側でまずはどんなコンポーネントがあるのか登録する必要がある。
コンポーネント登録の方法はグローバルとローカルの2種類。
グローバル登録
main.jsに書きの記述で登録する。
import
で外部ファイル(Child.vue)を読み込み、
Vue.component()
で登録される。
import Child from './components/Child.vue'
Vue.component('Child', Child);
ローカル登録
親となるコンポーネントファイルの<script>
タグ内で登録する。
こちらでもimport
で読み込み。
export default {}
のコンポーネントプロパティに登録する。
<script>
import Child from "./components/Child"
export default{
components: {
Child
},
};
</script>
呼び出し
親コンポーネント側で、HTMLタグと同様の記述で呼び出し、ページに表示される。
<template>
<div>
<Child></Child>
</div>
</template>
コンポーネント間でのデータのやり取りはまた別の記事で。
Author And Source
この問題について(vue.js コンポーネントを作成する), 我々は、より多くの情報をここで見つけました https://qiita.com/haraken_qiita/items/cbfdd7e98de9543a6897著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .