Demo地址

關(guān)于如何搭建腳手架,這里暫且不提.
如果我們需要在一個組件中引用另一個組件,有兩種方式.

全局組件

新建一個myComponent組件:

//1.展示的視圖
<template>
  <div class="myComponent">
    <ul>
      <li v-for="user in users">
        {{user}}
      </li>
    </ul>
  </div>
</template>

<script>
//需要實現(xiàn)的業(yè)務(wù)邏輯
export default
{
      name: 'myComponent',
      data(){
        return{
          users : ["allen","marry","tom"]
      }
   }
}
</script>
//需要展示的樣式
<style scoped>

</style>

vue的模板其實是固定的,包含三塊:

• 展示的視圖
• 處理的業(yè)務(wù)邏輯
• 需要的樣式

在腳手架生成的項目中的main.js里我們寫下如下代碼:

import Vue from 'vue'
import App from './App'
import myComponent from './components/myComponent'

Vue.config.productionTip = false
//調(diào)用全局組件
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里的全局組件注冊和導(dǎo)入即可,同時在App.vue中:

//導(dǎo)入組件
import HelloWorld from './components/HelloWorld'
import myComponent from './components/myComponent'
export default {
  name: 'App',
  components: {
      HelloWorld,
      //注冊組件
      myComponent
  }
}
</script>