Vue：组件如何使用 webpack vue-loader 获取名称答案

【问题标题】：Vue:How the component get the name using webpack vue-loaderVue：组件如何使用 webpack vue-loader 获取名称
【发布时间】：2017-05-04 11:31:03
【问题描述】：

我这几天看vue doc，学习组件。

但有一件事让我很困惑

文档说有一些注册组件的方法

全球注册

Vue.component('my-component', {
  // options
})

本地注册

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> will only be available in parent's template
    'my-component': Child
  }
})

这些注册已经定义了组件的名称（命名为'my-component'），很酷

但是当我参考一些 vue + webpack 项目时，我发现他们喜欢使用下面的方式来注册一个组件

index.html

<!--index.html-->

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test-vue</title>
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

app.js

// app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App.vue'

Vue.use(VueRouter);
Vue.use(VueResource);

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

App.vue

<!--App.vue-->
<template>
    <div id="app">
        <div>Hello Vue</div>
    </div>
</template>

<script>
    export default {
    }
</script>

似乎组件没有描述它的名字，为什么组件仍然可以工作？

请帮忙。

【问题讨论】：

标签： webpack vue.js vuejs2 vue-loader

【解决方案1】：

这是 ES6 模块。每个组件都存在于自己的文件中。该文件具有“默认导出”。这种出口是无名的。导入组件时，将其分配给变量。那是它被命名的时候。

假设我有一个像这样的模块，my-component.vue

<!--my-component.vue-->
<template>
    <div id="my-component">
        <div>Hello</div>
    </div>
</template>

<script>
    export default {
    }
</script>

当我需要使用这个模块时，我会导入它，并给它一个名字。

<!--another-component.vue-->
<template>
    <div id="app">
        <div>Test</div>
        <my-component></my-component>
    </div>
</template>

<script>
    import myComponent from 'my-component.vue'

    export default {
        components:{
            'my-component':myComponent
        }
    }
</script>

按照惯例，每次导入时都将使用相同的名称，以保持头脑清醒。但由于这是一个变量，从技术上讲，您可以随意命名。

<!--another-component.vue-->
<template>
    <div id="app">
        <div>Test</div>
        <test-test-test-test></test-test-test-test>
    </div>
</template>

<script>
    import seeYouCanNameThisThingAnything from 'my-component.vue'

    export default {
        components:{
            'test-test-test-test':seeYouCanNameThisThingAnything 
        }
    }
</script>

在这个模块系统中，特别是 Vue 模块系统中，组件不会自己命名。需要其他组件的组件将提供名称。通常，此名称将与文件名相同。

【讨论】：

【解决方案2】：

这是 ES6 中的一个新特性

var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}

// equal to
var baz = {foo: foo};

如果直接将App 分配给一个对象，它的变量名就是属性名。

【讨论】：