Vue.js 加载单文件组件

Posted 2023-02-22

【中文标题】Vue.js 加载单文件组件

【英文标题】：Vue.js loading single-file components

【发布时间】：2017-11-17 23:54:15

【问题描述】：

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

【讨论】：

非常感谢！这就是我正在搜索的内容。

非常好的总结！ Vue 文档页面不太擅长解释这一点并显示每个文件的内容。我发现令人困惑的一件事是，每个组件在 data() 函数中都有一个“名称”值，但该名称实际上并未在任何地方使用。我认为这是标签的名称或其他名称，但我看到您实际上是在使用 Vue.component 或本地组件配置全局导入标签时为标签命名。

很好的回应，这是一个很好的例子，说明堆栈溢出答案有多好。