0
点赞
收藏
分享

微信扫一扫

Vue 中 的 mixin 混入(合)

ZSACH 2022-12-10 阅读 172

Vue 中 的 mixin 混入(合)


1:说明


/*
## mixin(混入)

1. 功能:可以把多个组件共用的配置提取成一个混入对象

2. 使用方式:

第一步定义混合:

```
{
data(){....},
methods:{....}
....
}
```

第二步使用混入:

全局混入:```Vue.mixin(xxx)```
局部混入:```mixins:['xxx'] ```



*/



​​Vue 中 的 mixin 混入(合)_Vue​​

​​Vue 中 的 mixin 混入(合)_Vue_02​​


2:代码结构

​​Vue 中 的 mixin 混入(合)_App_03​​


3:代码内容

vue.config.js


const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false /*关闭语法检查*/
})



main.js




//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;
//全局引用 minix
import { mixinGlobalData ,mininGlobalData2} from "@/mixin";
Vue.mixin(mixinGlobalData);
Vue.mixin(mininGlobalData2);


// 创建Vm
const vm = new Vue( {
el:'#app',
render: (h) => h(App)
});



index.html

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- 针对ie浏览器的一个特殊配置,含义是让ie浏览器以最高的渲染级别进行渲染界面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 开启移动端理想视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 配置页签的图标 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 配置网页的标题:找 package.json文件里的 "name": "vue_test" 值 -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 如果浏览器不支持js,则该标签的元素里的内容将会被渲染 -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 容器 -->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>





App.vue

<!--

-->

<template>
<div>
<hr/>
<div class="divCss">
<h1 class="h1Css">Vue中的 minix属性</h1>
<hr/>
<!-- 调用组件,传递数据 -->
<School/>
<hr/>
<Student />
<hr/>

</div>

</div>
</template>
<script>

import School from './components/School.vue';
import Student from './components/Student.vue';


export default {
name:'App',
components:{
Student,
School
},
}
</script>

<style>
.divCss{
background-color: chocolate;
margin: auto;
padding: 20px;
}
.h1Css{
font-size: 36px;
color: white;
}
</style>




Student.vue


<!--

-->
<template>
<div class="schoolClassStyle">
<h1 style="color:red">{{msg}}</h1>
<h2 @click="showName">学生名称:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
</div>
</template> <script>
//引入一个混合 mixin
import { mixin,mixinData } from '@/mixin';
export default {
name:'Student',
data () {
return {
msg:'学生信息',
name:'向北',
sex:'男'
}
},
//配置混合对象,可以配置多个
mixins:[mixin,mixinData]

}
</script>
<style>
.schoolClassStyle{
background-color: aquamarine;
}
</style>





School.vue


<!--

-->
<template>
<div class="schoolClassStyle">
<h1 style="color:red">{{msg}}</h1>
<h2 @click="showName">学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
//引入一个混合 mixin
import { mixin ,mixinData} from '@/mixin';
export default {
name:'School',
data () {
return {
msg:'学校信息',
name:'华南',
address:'广州市天河区中山大道西55号'
}
},
//配置混合对象,可以配置多个
mixins:[mixin,mixinData]

}
</script>
<style>
.schoolClassStyle{
background-color: aquamarine;
}
</style>




minix.js


export const mixin ={
methods: {
showName(){
alert(this.name);
}
},

}

export const mixinData={
data () {
return {
x:100,
y:100
}
}
}


export const mixinGlobalData={
data () {
return {
g_x:100,
g_y:100
}
}
}

export const mininGlobalData2={
data () {
return {
g_m:100,
g_n:100
}
}
}



4:执行效果

​​Vue 中 的 mixin 混入(合)_Vue_04​​


​​Vue 中 的 mixin 混入(合)_html_05​​

​​Vue 中 的 mixin 混入(合)_Vue_06​​​​Vue 中 的 mixin 混入(合)_Vue_07​​​​Vue 中 的 mixin 混入(合)_Vue_08​​​​Vue 中 的 mixin 混入(合)_html_09​​

为人:谦逊、激情、博学、审问、慎思、明辨、 笃行
学问:纸上得来终觉浅,绝知此事要躬行
为事:工欲善其事,必先利其器。
态度:道阻且长,行则将至;行而不辍,未来可期
.....................................................................
------- 换了个头像,静静的想,默默的思恋,一丝淡淡的忧伤 ----------
------- 桃之夭夭,灼灼其华。之子于归,宜其室家。 ---------------
------- 桃之夭夭,有蕡其实。之子于归,宜其家室。 ---------------
------- 桃之夭夭,其叶蓁蓁。之子于归,宜其家人。 ---------------



举报

相关推荐

0 条评论