vue学习 18组件嵌套

在components文件下新建Users.vue组件文件

<template>
  <div class="users">
    <ul>
        <li v-for="user in users">
            {{user}}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
  data () {
    return {
        users: ["A1", "B2", "C3"]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>

全局注册Users组件（一般不建议使用全局注册）

在main.js中，引入Users,并注册

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

Vue.config.productionTip = false

// 全局注册组件
Vue.component("users", Users)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

局部注册（常用）

只在App.vue中注册

<!-- 1模板：HTML结构 -->
<template>
  <div id="app">
    <h1>{{title}}</h1>
    <users></users>
  </div>
</template>

<!-- 2行为：处理逻辑 -->
<script>
// 组件之间产生关联：首先要导入，然后在components: {HelloWorld} 注册
import HelloWorld from './components/HelloWorld'
import Users from './components/Users'

export default {
  name: 'App',
  components: {
    Users //注册HelloWorld组件
  },
  data(){
    return {
      title: "我的第一个Vue脚手架项目"
    }
  }
}
</script>

<!-- 3样式：解决样式 -->
<style>

</style>