Vue.js加载单文件组件-Java 学习之路

我是Vue.js的新手，想要使用单文件组件，但我不了解工作流程 .

例如，我有三个组件： App ， Grid 和 List

App.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>

Grid.vue

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

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

List.vue

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

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

Main.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 method注册组件：

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实例，否则子组件将无法访问这些已注册的组件 .

回复于 2024-05-04T05:48:48+08:00

Vue.js加载单文件组件

1 回答

相关问题