查看“Vue从入门到实战:混入”的源代码
←
Vue从入门到实战:混入
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能, 一个混入对象可以包含任意组件选项, 当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 <nowiki><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <script type = "text/javascript"> // 定义一个混入对象 var myMixin = { created() { this.startMixin() }, methods: { startMixin: function () { document.write('欢迎来到混入实例') } } }; // 定义一个组件,使用这个混入对象 var Component = Vue.extend({ mixins: [myMixin], template: '<p>Vue.js无难事</p>', }) // 创建根实例 new Vue({ el: '#app', components: { MyComponent: Component } }) </script> </body> </html></nowiki> ==选项合并== 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。 混入对象的钩子在组件自身钩子之前调用 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <script type = "text/javascript"> // 定义一个混入对象 var myMixin = { data: function () { return { // 混入对象的数据属性 title: 'VC++深入详解', message: '很好,很强大' } }, created(){ document.write('混入对象的钩子被调用<br>') } } // 定义一个组件,使用这个混入对象 var Component = Vue.extend({ mixins: [myMixin], data(){ return { // 组件的数据属性 title: 'Vue.js无难事' } }, created(){ document.write('组件钩子被调用<br>') }, template: ` <div> <h3>{{title}}</h3> <p>{{message}}</p> </div> `, }) new Vue({ el: '#app', components: { MyComponent: Component } }) </script> </body> </html> </nowiki> 演示效果: <nowiki> Vue.js无难事 很好,很强大 混入对象的钩子被调用 组件钩子被调用</nowiki> ==全局混入== 混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <script type = "text/javascript"> // 为自定义的选项 myOption 注入一个处理器。 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { document.write(myOption); } else document.write('你怎么没有使用自定义选项?<br>') } }) // 定义一个组件,使用自定义选项myOption var Component = Vue.extend({ myOption: 'Hello, Vue.js', template: '<p>Vue.js无难事</p>' }) // 根实例没有使用自定义选项myOption new Vue({ el: '#app', components: { MyComponent: Component } }) </script> </body> </html> </nowiki> ==自定义选项合并策略== 自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies 添加一个函数: <nowiki>Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // 返回合并后的值 } </nowiki> 对于多数值为对象的选项,可以使用与 methods 相同的合并策略: <nowiki>var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods</nowiki>
返回至
Vue从入门到实战:混入
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息