Vue组件嵌套的理解与mixin的使用

---

前言

一个简单的基于Vue-Cli小Demo，有助于理解组件化思想与mixin的使用。

---

一、安装Vue-Cli

1. //安装脚手架
2. npm i -g  @vue/cli
3. //查看vue版本
4. vue -V

二、初始化项目

1.创建项目

1.vue create test1
2.cd test1 
3.npm run serve

2.编写组件

1.首先在components下创建student.vue：

<template>
<div>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
</div>
</template>
<script>
export default {
    name: "student",
    data() {
        return {
            name: "zwt",
            age: 12,
        };
    },
};
</script>
<style lang="scss" scoped></style>

2.创建school.vue 并引入student.vue作为子组件并使用：

<template>
<div>
    <h2>校名：{{ name }}</h2>
    <h2>地区:{{ area }}</h2>
    <hr />
    <student />
</div>
</template>
<script>
import student from './student.vue';
export default {
    name: "school",
    data() {
        return {
            name: "福建医科大学",
            area: "福建",
        };
    },
    components: {
        student
    }
};
</script>

<style lang="scss" scoped></style>

3.在App.vue中引入student组件并使用：

<template>
<div id="app">
    <school />
</div>
</template>
<script>
import school from "./components/school";
export default {
    name: "app",
    components: {
        school,
    },
};
</script>
<style></style>

3.运行

可以看到App下管理着school组件，school组件下有一个子组件student。

三、mixin的使用

对mixin的理解：可以把多个组件相同的配置项或者共同使用的东西放在一个js文件中，当需要使用的时候可以通过mixins引入对应的模块。

1.用法1

1.在src/mixin下创建mixin.js：

export const hunhe1 = {
  methods: {
    show() {
      alert("我是mixin带来的方法");
    },
  },
};

2.分别给student和school的姓名和校名对应的h2标签添加相同的show方法：

//student.vue
<h2 @click="show">姓名：{{ name }}</h2>
//school.vue
<h2 @click="show">校名：{{ name }}</h2>

3.对两个组件同时引入并使用mixin：

//引入
import {hunhe1} from '../mixin/mixin.js'
//使用
mixins:[hunhe1]

效果展示

点击姓名和校名都会弹出show方法：

2.用法2

1.若组件之间有相同的属性，同样可以使用mixin
2.在mixin.js中添加hunhe3

export const hunhe3 = {
  data() {
   return {
       x:1,
       y:1
   }
  },
};

3.同理在student和school中引入使用：

//引入
import {hunhe1} from '../mixin/mixin.js';
//使用
 mixins:[hunhe1,hunhe3]

效果展示

school组件和student组件中有相同属性x和y：

---

总结

例子简单，但是有助于理解组件化思想与mixin的使用。