App.vue引入全局组件
@符号
先说下vue项目中的@符号,我们在build/webpack.base.conf
这个文件下可以看到webpack把@定义成 src 文件路径。
所以@符号跟vue没有什么关系,他是基于webpack的,有很多人把这个给误解了。
而 .
是代表绝对路径。
App.vue全局引入
App.vue是全局显示的组件,所以把组件引入到App显示每个页面都会有。
使用import 别名 “@/components/组件名”
进行组件引用,然后在components
中注册,在html输出别名标签即可,千万不要在@后面跟src。
目前看到有Hello和index两个组件,我们在App中引入Hello:
HTML:
<div id="app">
<hello></hello>
</div>
JS:
//全局引入
import hello from "@/components/HelloWorld.vue"
export default {
components: {
hello
},
name: 'App'
}
Hello内容:
<div id="hello">
<p>hello world</p>
</div>
页面内容:
局部引入
局部引入和全局引入方法是一致的,只不过是在components下单组件之间互相引用,如下例子只能在index页面显示hello页面的内容。
html:
<div id="index">
<p>你好</p>
<hello></hello>
</div>
JS:
import hello from "./HelloWorld.vue"
export default {
components:{
hello
}
};
页面效果: