全球注册

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
  }
})

这些注册已经定义了组件的名称（名为＆＃39; my-component＆＃39;），这很酷

但是当我提到一些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>

组件似乎不描述其名称，为什么组件仍可以工作？

请帮助。

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

Answer 2

这是ES6中的新功能

println(Gender.values().joinToString()) // Female, Male

如果直接将var foo = 'bar'; var baz = {foo}; baz // {foo: "bar"} // equal to var baz = {foo: foo};分配给对象，则变量名称是属性名称。

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

全球注册

本地注册

2 个答案: