【老司機帶你飛】vue.js腳手架（三）

組件嵌套

實際上，HelloWorld已經實現了組件嵌套。嵌套過程：首先創建組件->使用import導入->在處理邏輯中註冊組件->在模板中插入組件標籤

例：在app.vue中嵌套user組件
在components文件夾中新建User.vue

<template>
    <div class="user">
      {{username}}
    </div>
</template>
<script>
    export default {
        name: "User",
      data(){
          return{
            username:"張三"
          }
      }
    }
</script>
<style scoped>
</style>

App.vue中

<template>
  <div id="app">
    <User></User>
  </div>
</template>
<script>
import User from './components/User'
export default {
  name: 'App',
  components: {
    User
  }
}
</script>
<style>
</style>

也可以註冊全局組件
在main.js文件中

import User from './components/User'
Vue.component('User',User)

一般情況下，開發中不會註冊全局組件，我們只需要註冊局部組件就可以了

QQ：732005030
掃碼加微信