关于如何搭建脚手架,这里暂且不提.
如果我们需要在一个组件中引用另一个组件,有两种方式.
全局组件
新建一个myComponent组件:
//1.展示的视图
<template>
<div class="myComponent">
<ul>
<li v-for="user in users">
{{user}}
</li>
</ul>
</div>
</template>
<script>
//需要实现的业务逻辑
export default
{
name: 'myComponent',
data(){
return{
users : ["allen","marry","tom"]
}
}
}
</script>
//需要展示的样式
<style scoped>
</style>
vue的模板其实是固定的,包含三块:
- 展示的视图
- 处理的业务逻辑
- 需要的样式
在脚手架生成的项目中的main.js里我们写下如下代码:
import Vue from 'vue'
import App from './App'
import myComponent from './components/myComponent'
Vue.config.productionTip = false
//调用全局组件
Vue.component("myComponent",myComponent);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
这里通过Vue.component("myComponent",myComponent);添加了一个组件,并且import myComponent from './components/myComponent'.
然后在App.vue中:
<template>
<div id="app">
<HelloWorld/>
//在这里直接使用别名就可以了
<myComponent/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
在组件中使用组件
这里我们只需要去掉main.js里的全局组件注册和导入即可,同时在App.vue中:
//导入组件
import HelloWorld from './components/HelloWorld'
import myComponent from './components/myComponent'
export default {
name: 'App',
components: {
HelloWorld,
//注册组件
myComponent
}
}
</script>
