wepy中的mixin混合

﹏ヽ暗。殇╰゛Y 2022-04-11 08:00 267阅读 0赞

无论我们开发什么项目，我们都希望可以把公共的部分提取出来，然后在各个地方引用即可。在wepy中，mixin则实现这种功能。

**封装mixin**

import wepy from 'wepy';
    export default class defaultMixin extends wepy.mixin {
    	data = {
    		foo: '我是可复用数据111',
    		bar: '我是可复用数据222'
    	}
    	methods = {
    		tap(){
    			console.log('我是可复用方法')
    		}
    	}
    }

**页面中引用**

<style lang="less">
    </style>
    <template>
      <view class="container">
        <button @tap='tap'>检验mixin中的方法</button>
      </view>
    </template>
    
    <script>
      import wepy from 'wepy'
      //引入可复用部分
      import DefaultMixin from '../mixins/defaultMixin'
      export default class My extends wepy.page {
        data = {
          foo: '我是真正组件中的数据'
        }
        mixins = [DefaultMixin];
        onShow(){
          //组件已申明的数据，会采用组件中的数据
          console.log(this.foo);
          console.log(this.bar);
        }
        methods = {
          //对于组件methods响应事件，先响应组件本身响应事件，然后再响应混合对象中的响应事件。
          tap(){
            console.log('我是真正组件中的方法')
          }
        }
      }
    </script>

结果显示：  
![在这里插入图片描述][20181205095606547.png]

[20181205095606547.png]: /images/20220411/6c62be84db47497f8ac842bbe9384d1d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关混合指令：定义混合指令@mixin以及引用混合指令@include;@mixin参数

混合指令：定义混合指令@mixin以及引用混合指令@include <template> <view class="content"> 定

迈不过友情╰/ 2023年06月13日 15:29/ 0 赞/ 87 阅读

相关 scss混合(mixins)使用

例一、使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。 1、创建mixins.scss文件 //文本n行溢出隐藏 @mixin ellip

末蓝、/ 2022年12月31日 06:20/ 0 赞/ 193 阅读

相关 LESS详解之混合(Mixins)高级

　　现在已经为大家介绍了LESS之混合(Mixins)的一些用法了，相信大家也用了不少有关LESS之混合(Mixins)了。接下来将为大家介绍一些有关LESS之混合(Mixin

小鱼儿/ 2022年09月17日 13:15/ 0 赞/ 265 阅读

相关 LESS详解之混合(Mixins)中级

　　之前为大家介绍了一下有关LESS详解之混合(Mixins)的初级，想必大家已经对LESS详解之混合(Mixins)有了一些了解和认识了。那么下面就开始进入LESS详解之混合

左手的ㄟ右手/ 2022年09月17日 13:14/ 0 赞/ 194 阅读

相关 LESS详解之混合(Mixins)初级

　　在LESS中，有很多方式都可以称作混合。比如继承已有的样式，调用有参数的类名等。在LESS详解之混合都会为大家一一介绍的。　　继承类名　　在

墨蓝/ 2022年09月17日 13:13/ 0 赞/ 294 阅读

相关 SASS详解之混合(mixins)

　　SASS详解之混合(mixins)可以出现在SASS的任何地方。有很多类名具有相同或者相似的样式，就可以用SASS中的混合(mixins)来进行编写，然后针对不同类名的不同

分手后的思念是犯贱/ 2022年09月17日 11:17/ 0 赞/ 380 阅读

相关 less-mixin（混合）

1、混合类选择器和id选择器编辑less： .a, b { color: red; } .mixin-class {

た入场券/ 2022年06月14日 11:12/ 0 赞/ 208 阅读

相关 Vue.js学习（三）：mixins混合对象的使用

我对mixins的理解是，有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象

比眉伴天荒/ 2022年06月02日 10:35/ 0 赞/ 202 阅读

相关 wepy中的mixin混合

无论我们开发什么项目，我们都希望可以把公共的部分提取出来，然后在各个地方引用即可。在wepy中，mixin则实现这种功能。封装mixin import wepy

﹏ヽ暗。殇╰゛Y/ 2022年04月11日 08:00/ 0 赞/ 268 阅读

相关 vue mixins混合配置

一个混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项 1、使用 Vue.extend(

我就是我/ 2021年07月24日 18:52/ 0 赞/ 589 阅读