1

这几天我看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 项目时，我发现他们喜欢使用下面的方式来注册组件

索引.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>

应用程序.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)
});

应用程序.vue

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

<script>
    export default {
    }
</script>

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

请帮忙。

4

2 回答 2

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 模块系统中，组件不会自己命名。需要其他组件的组件将提供名称。通常，此名称将与文件名相同。

于 2017-05-04T15:56:48.757 回答
0

这是 ES6 中的一个新特性

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

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

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

于 2017-06-01T07:02:57.083 回答