Vue-组件嵌套、组件CSS样式、多组件嵌套、组件传值、传值和传引用、多个单文件组件路由的使用

一、组件嵌套

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->找到各个单文件组件，