CODEWITHSUNDEEP
webpackvue.jsvuejs2vue-loader
Gary
Gary

Reputation: 1247

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

I watch the vue doc these day,and learning the component.

But there are one thing confusing me

the doc say there are some ways to registration a component

Global Registration

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

Local Registration

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

these registration have defined the name of component(named 'my-component'),that is cool

but when i refered to some vue + webpack project, i found that they like to use below way to registration a component

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>

it seem that the component do not descript its name, why the component still can work?

Please Help.

Upvotes: 1

Views: 1850

Answers (2)

Gary
Gary

Reputation: 1247

This is a new feature in ES6

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

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

if directly assign App to a object it variable name is the property name.

Upvotes: 0

Eric Guan
Eric Guan

Reputation: 15992

This is ES6 modules. Each component lives in its own file. This file has a "default export". This export is nameless. When you import the component, you assign it to a variable. That is when it is given a name.

Say i have a module like so, my-component.vue

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

<script>
    export default {
    }
</script>

When i need to use this module, i'll import it, and give it a name.

<!--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>

By convention, you will use the same name every time you import it, to keep yourself sane. But since this is a variable, you can technically name it anything you want.

<!--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>

In this module system, specifically the Vue module system, components do not name themselves. Components that require other components will provide the name. Typically, this name will be the same as the filename.

Upvotes: 1

Related Questions