一、组件嵌套

App.vue是父组件，components下面的是子组件

组件嵌套包括，全局组件和局部组件

一般使用的是局部组件，使用方式是，

1、引用组件

2、注册组件

3、使用组件

新建一个Users.vue 子组件，

<template>
  <div class="Users">
    <ul>
      <li v-for="(user, index) in users" :key="index">{{ user }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: ["测试1", "测试2", "测试3"],
    };
  },
};
</script>

<style>
</style>

引入这个子组件，在App.vue里的<script>里引入组件

注册组件，就是在components里 写入这个组件的名字，

最后是使用组件，在唯一的<div>标签里使用这个组件

<template>
  <!-- 包括html -->
  <div id="app">
    <!-- 3、使用组件 -->
    <User />
  </div>
</template>

<script>
// js部分，逻辑部分
//import HelloWorld from "./components/HelloWorld.vue";
//1、引入组件
import User from "./components/Users.vue";

export default {
  name: "App",
  components: {
    // 2、注册组件
    User,
  },
};
</script>

<style>
/* css部分 */
#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>

二、组件CSS样式

组件css样式，App.vue里的样式是全局的样式，如果想在子组件中只针对子组件生效css，需要加scoped域。

<style scoped>
/* css部分 */
h1 {
  color: blue;
}
</style>

三、多组件嵌套

新建一个Header.vue ，Footer.vue子组件，然后还是使用之前的方式，在App.vue里引入组件，然后注册组件，最后使用组件这样一个顺序。

<template>
  <div class="Header">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "我是title",
    };
  },
};
</script>

<style scoped>
.Header {
  background: lightgreen;
  padding: 10px;
}
h1 {
  color: #222;
  text-align: center;
}
</style>

<template>
  <div class="Footer">
    <p>{{ copyright }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      copyright: "Copyright 2022 Vue Demo",
    };
  },
};
</script>

<style scoped>
.Footer {
  background: #222;
  padding: 6px;
}
p {
  color: lightgreen;
  text-align: center;
}
</style>

<template>
  <!-- 包括html -->
  <div id="app">
    <!-- 3、使用组件 -->
    <Header />
    <User v-bind:usersname="users" />
    <Footer />
  </div>
</template>

<script>
// js部分，逻辑部分
//import HelloWorld from "./components/HelloWorld.vue";
//1、引入组件
import User from "./components/Users.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

export default {
  name: "App",
  data() {
    return {
      users: [
        { usename: "test1", wechat: "1234567", show: false },
        { usename: "test2", wechat: "1234567", show: false },
        { usename: "test3", wechat: "1234567", show: false },
        { usename: "test4", wechat: "1234567", show: false },
      ],
    };
  },
  components: {
//2、注册组件
    User,
    Header,
    Footer,
  },
};
</script>

<style scoped>
/* css部分 */
</style>

四、组件传值

组件传值就是把父组件的值传递给子组件，所以父组件必须有值，左侧是自定义的名称，右侧是实际的值使用v-bind: 绑定的就是data里面的值。
App.vue里data里面的值是父组件的值，然后在使用组件的地方，使用绑定方式，左侧是自定义的名字，右侧是我们data里面的数据，如果不用v-bind，那么就是一个字符串。绑定后，在Users.vue里接收，使用的是自定义那个名字接收，在<script>标签里 新增props:{} 来接收传过来的属性值，可以使用新增一个方法打印这个传过来的值，进行验证。

App.vue

<template>
  <!-- 包括html -->
  <div id="app">
    <Header />
    <User v-bind:usersname="users" />
    <Footer />
  </div>
</template>

<script>
// js部分，逻辑部分
//import HelloWorld from "./components/HelloWorld.vue";
//1、引入组件
import User from "./components/Users.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

export default {
  name: "App",
  data() {
    return {
      users: [
        { usename: "test1", wechat: "1234567", show: false },
        { usename: "test2", wechat: "1234567", show: false },
        { usename: "test3", wechat: "1234567", show: false },
        { usename: "test4", wechat: "1234567", show: false },
      ],
    };
  },
  components: {
    User,
    Header,
    Footer,
  },
};
</script>

<style scoped>
/* css部分 */
</style>

Users.vue

<template>
  <div class="Users">
    <p>{{ usersname }}</p>
    <ul>
      <li
        @click="user.show = !user.show"
        v-for="(user, index) in usersname"
        :key="index"
      >
        <h2>{{ user.usename }}</h2>
        <h3 v-show="user.show">{{ user.wechat }}</h3>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // props: ["usersname"],
  props: {
    usersname: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  methods: {
    test() {
      console.log(this.users);
    },
  },
};
</script>

<style scoped>
h1 {
  color: green;
}
</style>

五、传值和传引用

属性传值包括两种情况：1、传值（String 类型、number类型、boolean类型） 和2、传引用（对象类型、数组类型）。传引用会影响多个使用它的地方，传值只会影响自身的值。

六、多组件页面路由的使用

1、先定义路由文件，在router目录下index.js中，在路由文件中导入路由模块，

import Router from 'vue-router'，然后把所有路由匹配规则通过routes属性指定

routes[
         {
           path: '/testcases_edit/:id',
           component: resolve => require(['../components/page/TestcaseEdit.vue'], resolve),
           meta: { title: '用例编辑' },
           name: 'testcases_edit'
           },

]

路径path，component是指定的调用哪个单文件组件

2、路由文件写完之后，需要加入到main.js当中。import router from './router'，然后把router文件导入到Vue对象当中

new Vue({
    router,
    i18n,
    render: h => h(App)
}).$mount('#app');

3、在组件中如何使用路由，需要在App.vue文件中，这个标签进行使用     <router-view></router-view>

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<style>
    @import "./assets/css/main.css";
    @import "./assets/css/color-dark.css";     /*深色主题*/
</style>

index.html -> main.js-> App.vue->router下面的路由index.js->找到各个单文件组件，