网页设计视频教程-响应式手机网站制作,做的门户网站怎么绑定ip地址,动漫设计需要什么基础,html5 单页 响应式 网站模板在 vue 组件内#xff0c;如果想将一些公共功能#xff0c;如组件、方法、钩子函数等复用#xff0c;混入是一个很好的选择。 现在开始我们的混入使用吧 1、我们可以创建一个目录mixins#xff0c;在创建一个comment.js文件如图#xff1a;
// 在 common.js 里写你想共享…在 vue 组件内如果想将一些公共功能如组件、方法、钩子函数等复用混入是一个很好的选择。 现在开始我们的混入使用吧 1、我们可以创建一个目录mixins在创建一个comment.js文件如图
// 在 common.js 里写你想共享的需求
export default {created() { },methods: {balaHello() {console.log(hello page component);}}
}2、使用混入
2-1全局混入
// 在 main.js 中直接引入
import mixin from /mixins/common // 注意路径
Vue.mixin(mixin) // 注册!-- 使用示例--
scriptexport default {mounted() {this.balaHello() // hello page component}}
/script2-2局部混入
templatedivbutton clickhandleMixin点击我/button/div
/templatescriptimport sayMixin from /mixins/common; // 1.先引入混入mixinexport default {mixins:[sayMixin], // 2.以数组的形式注册键是固定的methods:{handleMixin(){ // 3.点击就可以调用 common.js 里面的方法this.balaHello(); // hello page component}}}
/script3、mixin 混入的注意事项 1、mixin 中定义的生命周期函数会比引用组件的生命周期先执行, 会和组件中定义的 methods、created 等选项合并调用 2、mixin 中定义的方法和参数在各组件中不共享即当前组件对 mixin 的属性的修改其他也引用了这个 mixin 的组件不会受影响 3、如果同时引入多个 mixin 对象, 执行顺序和引入顺序一致 4、要是 mixin 和组件中出现了重名现象那么优先采用组件中定义的数据
