Mixin混入
Mixin混入，即放置两个组件共享的配置，然后组件使用的时候进行引入即可，一般将混入的组件定义在mixin.js文件中，和main.js平级
eg：
Mixin.js
export const mixin = {
methods: {
showName() {
alert(this.name)
}
}
}
School.vue
<template>
<div class="demo1">
<h2 @click="showName">学校名字:{
{ name }}</h2>
<h2>地址:{
{ address }}</h2>
</div>
</template>
<script>
import{
mixin} from"../mixin"
export default {
name:'SchoolVue',
data() {
return {
name: "nefu",
address: "哈尔滨",
};
},
mixins: [mixin]
}
</script>
<style>
/* 组建的样式 */
.demo1{
background: orangered;
}
</style>
Student.vue
<template>
<div class="demo">
<h2 @click="showName">名字:{
{name}}</h2>
<h2>性别:{
{ sex }}</h2>
</div>
</template>
<script>
import {
mixin } from "../mixin"
export default {
name:'StudentVue',
data() {
console.log(this)
return {
name:"yang",
sex:"男"
}
},
mixins: [mixin]
}
</script>
<style>
/* 组建的样式 */
.demo{
background: green;
}
</style>
混合冲突
Mixin混入，即放置的是组件共享的配置，所以很有可能混合中的配置和自己组件中的配置产生冲突。
这种情况下，一般以自己组件中的定义的配置为准。
有一个特殊的就是mount()挂载函数，他是两个地方的配置都执行。
全局混合
直接在main.js中进行配置
在main.js中添加如下代码
// 混合
import {
mixin } from "./mixin"
Vue.mixin(mixin)
插件
插件的作用：增强vue
插件的本质是一个对象，对象中必须包含install方法,install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
将插件定义在plugins.js中，和main.js平级。
在main.js中引入插件，而且在创建vm之前进行引入。
插件上可以写很多内容，eg
plugins.js
export default{
install(Vue) {
console.log("@", Vue)
// 定义全局过滤器
Vue.filter('mySlice',function (value){
return value.slice(0, 4);
})
// 定义全局指令
Vue.directive("fbind", {
// 指令与元素成功绑定时（一上来)调用
bind(element, binding) {
element.value = binding.value;
},
// 指令所在模板被重新解析是调用
update(element, binding) {
element.value = binding.value;
},
});
// 定义混入
Vue.mixin({
data() {
return {
a: 1,
b: 0
}
}
})
// 给Vue原型上添加一个方法
Vue.prototype.hello = ()=>{
alert('你好啊')}
}
}
main.js
import plugins from './plugins'
// 应用插件
Vue.use(plugins)
// 带参数
// Vue.use(plugins,1,2,3)
scoped样式
问题：多个组件之间样式名的冲突问题
组件中的style中的样式最终会汇总在一起，所以组件中的style样式名应该各不相同避免造成冲突。
但是很难。
就可以通过 scoped，解决，只需要在style标签后面添加 scoped即可。表示该style只在该页面生效。
Student.vue
<template>
<div class="demo">
<h2>名字:{
{ name}}</h2>
<h2>性别:{
{ sex }}</h2>
<hr>
</div>
</template>
<script>
export default {
name:'StudentVue',
data() {
console.log(this)
return {
name:"yang123",
sex:"男"
}
},
}
</script>
<style scoped>
.demo{
background: lightsalmon;
}
</style>
School.vue
<template>
<div class="demo">
<h2>学校名字:{
{ name }}</h2>
<h2>地址:{
{ address }}</h2>
<hr>
</div>
</template>
<script>
export default {
name:'SchoolVue',
data() {
return {
name: "nefu",
address: "哈尔滨",
};
},
}
</script>
<style scoped>
.demo{
background: skyblue;
}
</style>
实现原理：为标签添加一个特殊的属性，以避免冲突
在app组件中不适合使用scoped
因为app组件中的样式应该给全局的组件使用。
less
style可以使用less编写，但是脚手架默认不支持less，我们需要安装：npm i less-loader
这样就可以编写less了。
eg：
School.vue
<template>
<div class="demo">
<h2>学校名字:{
{ name }}</h2>
<h2 class="fonty">地址:{
{ address }}</h2>
<hr>
</div>
</template>
<script>
export default {
name:'SchoolVue',
data() {
return {
name: "nefu",
address: "哈尔滨",
};
},
}
</script>
<style scoped lang="less">
.demo{
background: skyblue;
.fonty{
font-size: 50px;
}
}
</style>
