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
赋给一个对象,它的变量名就是属性的名字。
这几天看了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
赋给一个对象,它的变量名就是属性的名字。