Vue:How 组件使用 webpack vue-loader 获取名称

Vue:How the component get the name using webpack vue-loader

这几天看了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>

好像组件没有描述它的名字,为什么组件还能用?

请帮忙。

这是 ES6 模块。每个组件都存在于自己的文件中。此文件有一个 "default export"。此导出是无名的。当您导入组件时,您将其分配给一个变量。那就是给它起名字的时候。

假设我有这样的模块,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 模块系统中,组件不给自己命名。需要其他组件的组件将提供名称。通常,此名称与文件名相同。

这是 ES6 的新特性

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

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

如果直接将App赋给一个对象,它的变量名就是属性的名字。