【老司机带你飞】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
扫码加微信