Vue学习日记：4 组件

组件之间的关系，组件与组件的互相的调用

组件的View部分

<template>
  <div id="app">
    <nav-demo></nav-demo>
  </div>
</template>

 CSS部分，当前组件的样式被scoped修饰，表示该样式私有化，代表着该样式只能在当前组件中使用

<style scoped>

</style>

在App.vue中导入组件

import NavDemo from './components/NavDemo.vue';
export default {
  name: 'App',
  components: {
    NavDemo
  }
}

navDemo

<template>
    <div class="nav">
        <!-- 导航栏：点击对应列表项通过路由跳转 -->
        <ul>
            <li>
                <router-link to ="/home">首页</router-link>
            </li>
        </ul>
        <!-- 路由的占位 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:"NavDemo",
    data() {
        return {
            navarr:[
                {name:"首页",url:"/home"}
            ]
        }
    }
}

navDemo即可在页面上展示