wordpress 上传网站,python开源网站源码,什么样式表一般用于大型网站,网站导航条用什么做vue之mixin混入
mixin是什么#xff1f;
官方的解释#xff1a; 混入 (mixin) 提供了一种非常灵活的方式#xff0c;来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时#xff0c;所有混入对象的选项将被“混合”进入该组件本身的…vue之mixin混入
mixin是什么
官方的解释 混入 (mixin) 提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被“混合”进入该组件本身的选项。
感觉有点难以理解其实简单来说就是将组件的公共逻辑或者配置提取出来哪个组件需要用到直接将提取的这部分混入到组件内部即可提取的是逻辑或配置而不是HTML代码和CSS代码。
mixin的特点
mixin中的数据和方法都是独立的组件之间使用后是互相不影响的。
使用
1.定义mixin.js文件
mixin是一个对象但是本身也是有生命周期的可以定义属性和方法等
export const mixins {data() {return {msg: 我是原本的结果,};},computed: {},created() {console.log(我是mixin中的created生命周期函数);},mounted() {console.log(我是mixin中的mounted生命周期函数);},methods: {clickMe() {console.log(我是mixin中的点击事件);},},
};mixin.js中的msg,clickMe在混入其他组件后都可以直接使用。
2.局部混入
index.vue文件
templatediv idappbutton clickclickMe点击我/buttonbutton clickchangeMsg更改mixin数据/button点击更换的数据{{msg}}demo/demo/div
/templatescript
import { mixins } from /mixin/index.js;
import demo from ./demo.vue;
export default {name: App,mixins: [mixins],components: { demo },created() {console.log(组件调用minxi数据, this.msg);},mounted() {console.log(我是组件的mounted生命周期函数);},methods: {changeMsg() {this.msg 我是点击后的结果;console.log(更改后的msg:, this.msg);},},
};
/script在混入mixin.js同时导入一个混入过的demo.vue组件来验证一下同一个数据之间是否相互影响。 demo.vue
templatedivmixin中的数据{{ msg }}/div
/template
script
import { mixins } from /mixin/index.js;
export default {mixins: [mixins],
};
/script经过测试发现是不影响的。
3.生命周期的执行顺序 这是没有带入demo组件时候生命周期的执行顺序 导入demo组件后的生命周期
4.冲突
如果属性名或者方法名冲突的话如何执行呢四个字总结就是就近原则组件本身有会覆盖混入的。
5.全局混入
在main.js中导入注册即可
import { mixins } from /mixin/index.js;
Vue.mixin(mixins);
