☰

Vue.js で単一ファイルコンポーネントをロードする 質問する

tag-icon • tag-icon javascript vuejs2 vue-component
Vue.js で単一ファイルコンポーネントをロードする 質問する

私は Vue.js を初めて使用しており、単一ファイル コンポーネントを使用したいのですが、ワークフローがわかりません。

たとえば、3つのコンポーネントがあります: App、GridおよびList

アプリ.vue 

<template>
    <div id="app">
        <div id="grid"></div>
        <div id="right"></div>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello Vue!'
            }
        }
    }
</script>

グリッド 

<template>
    <div id="left"></div>
</template>

<script>
    export default {
        name: 'grid',
        data: function () {
            return {
                grid: 'some-data'
            }
        }
    }
</script>

リスト.vue 

<template>
    <div id="right"></div>
</template>

<script>
    export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    }
}
</script>

メイン.js

import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'

new Vue({
    el: '#app',
    render: h => h(App)
});

new Vue({
    el: '#grid',
    render: h => h(Grid)
});

new Vue({
    el: '#right',
    render: h => h(PatternList)
});

動作しますが、これがネストされたコンポーネントを作成する正しい方法ではないことを願っています。

誰かやり方を教えてもらえますか？ ありがとう

ベストアンサー1

コンポーネントを登録するには、Vue.component方法:

import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'

Vue.component('grid', Grid);
Vue.component('pattern-list', PatternList);

new Vue({
  el: '#app',
  render: h => h(App)
});

次に、Appタグ名を使用してテンプレートに直接追加します。

<template>
  <div id="app">
    <grid></grid>
    <pattern-list></pattern-list>
  </div>
</template>

これにより、コンポーネントがグローバルに登録されます。つまり、どの Vue インスタンスでも、追加の設定なしでそれらのコンポーネントをテンプレートに追加できます。

次のように、コンポーネントを Vue インスタンスに登録することもできます。

new Vue({
  el: '#app',
  render: h => h(App),
  components: {
    'grid': Grid,
    'pattern-list': PatternList
  }
});

または、script単一ファイル コンポーネントのタグ内では、次のようになります。

<script>
import Grid from './vue/Grid.vue'

export default {
  name: 'app',
  components: {
    'grid': Grid,
    'pattern-list': PatternList
  }
});
</script>

これにより、コンポーネントがその Vue インスタンスにのみ登録されます。つまり、登録されたコンポーネントはその Vue インスタンスのテンプレート内でのみ使用可能になります。子コンポーネントは、それらのコンポーネントが子 Vue インスタンスにも登録されていない限り、登録されたコンポーネントにアクセスできません。

おすすめ記事