weex-如何自定义一个控件,并向控件中传值,接上一篇vue.set和this.xxx赋值

简介: weex-如何自定义一个控件,并向控件中传值,接上一篇vue.set和this.xxx赋值

上一篇博客,博主对vue.set和this.xxx赋值属性做了说明,但究竟要怎么来定义属性和进行赋值呢?同时这里也牵涉到如何来自定义一个控件,类似于weex-ui中的那些写好的组件组件,可以直接调用的。


效果图如下:

image.png

这里要特别说明下,在网页上不知道什么原因传值失败,效果图如下:

1.png

传值有问题,但使用playground App扫码在真机或者模拟器运行都是正确的,我们以真机运行和模拟器运行结果为标准,playgriound还是有些问题的,毕竟环境不一样,是模拟出来的。


下面来看下怎么声明属性,这里博主就上一篇博客说的两种情况(细分为三种情况)分别进行了定义和实现:

//cuslist.vue文件->子控件
定义属性
props: {
      pageName: {
        type: Array//数组
      },
      page:{
        type: Array//数组
      },
      cus: {//字典
        title: '',
        pages: 0
      },
      hpageName: {//字符串
        type: String
      },
      hpage:{//number 类型
        type: Number
      },
  },

给他们赋值一共分为三步:


第一步:在父控件中使用子控件

        <wxc-tab-page ref="wxc-tab-page"
                :tab-titles="tabTitles"
                :tab-styles="tabStyles"
                title-type="icon"
                :needSlider="needSlider"
                :is-tab-view="isTabView"
                :tab-page-height="tabPageHeight"
                @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
          <cuslist v-for="(v,index) in tabList" :key="v"
            :pageName="pageName"
            :page="page"
            :cus="cus"
            :hpageName="hpageName"
            :hpage="hpage">
          </cuslist>
        </wxc-tab-page>
        //和wxc-tab-page一起用的这里

第二部,在data中对变量进行初始化,这一步一定要进行,否则无法进行传值

data: () => ({
      page: [],//数组
      pageName: [],//数组
      hpage: 0,//Number
      hpageName: '',//字符串
      cus: {},//字典,对象,里面两个变量也可以在这里直接初始化,但是不写的话也没问题,但是赋值的时候不能写错
    }),

第三步:进行赋值操作,分为两小步


1)在created函数中给一个默认值;

2)在method中触发,改变页面的值;

    created () {
      kpageName = this.tabTitles[0]['title'];
      Vue.set(this.pageName, 0, kpageName);
      Vue.set(this.page, 0, 0)
      Vue.set(this.cus, 'title', kpageName);
      Vue.set(this.cus, 'pages', 0);
      this.hpage=0;
      this.hpageName='热门跟团';
    },
    methods: {
      wxcTabPageCurrentTabSelected (e) {
        const self = this;
        const index = e.page;
        setTimeout(() => {
            Vue.set(self.tabList, index, self.demoList);
            Vue.set(self.page, 0, index)
            kpageName = self.tabTitles[index]['title'];
            Vue.set(self.pageName, 0, kpageName);
            Vue.set(this.cus, 'title', kpageName);
            Vue.set(this.cus, 'pages', index);
            self.hpage=index;
            self.hpageName=kpageName;
        }, 100);
      }
    }

博主呢,一向话不多说,直接给你上代码,告诉你怎么做,代码都是比较基础的写法,不要问为什么,语法就是这样的,需要注意的就是赋值的地方,两种操作,三种状态,最好结合上一篇博客来看这篇博客的写法,你会学到更多。


但是对于初学者来说,他们可能连创建一个weex项目都不熟悉,对这里的代码位置也很陌生,博主早想到了,所以我一般都会附上一个Demo,什么都帮你做好,你只需要下载运行就可以了:点击下载

目录
相关文章
|
2月前
|
安全
Vuex惊天漏洞!!!破解Vuex状态管理漏洞:让getters变量具有set赋值的能力,支持双向绑定
Vuex惊天漏洞!!!破解Vuex状态管理漏洞:让getters变量具有set赋值的能力,支持双向绑定
|
9天前
|
索引
ArrayList集合常用方法,.set可以用来生成图片和赋值命名,array.remove(1),array.set(1,“xxxx”)可以修改指定位置,array.size可以获取元素的个数
ArrayList集合常用方法,.set可以用来生成图片和赋值命名,array.remove(1),array.set(1,“xxxx”)可以修改指定位置,array.size可以获取元素的个数
|
1月前
|
存储 Java 索引
JavaSE——集合框架一(6/7)-Set系列集合:LinkedHashSet的底层原理、TreeSet集合(介绍,自定义排序规则,排序示例)
JavaSE——集合框架一(6/7)-Set系列集合:LinkedHashSet的底层原理、TreeSet集合(介绍,自定义排序规则,排序示例)
23 1
|
17天前
|
数据库
仅当指定列列表,且SET IDENTITY_INSERT为ON时,才能对自增列赋值
仅当指定列列表,且SET IDENTITY_INSERT为ON时,才能对自增列赋值
11 0
|
1月前
|
存储 NoSQL Redis
Redis第七弹-Set与ZSET基本操作,Set(集合特点)SADD key member(注意这个key,必须是你自定义名字,不能用key)​编辑SMEMBERS key-查询所有的key
Redis第七弹-Set与ZSET基本操作,Set(集合特点)SADD key member(注意这个key,必须是你自定义名字,不能用key)​编辑SMEMBERS key-查询所有的key
|
2月前
|
存储 C++ 容器
set容器一自定义数据类型指定排序规则讲解
set容器一自定义数据类型指定排序规则讲解
67 1
|
2月前
|
C++ 容器
set容器-构造和赋值讲解
set容器-构造和赋值讲解
33 0
|
11月前
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
2月前
|
C++
c++ set、map的四种自定义排序方法
c++ set、map的四种自定义排序方法
109 0
|
9月前
|
SQL 分布式计算 DataWorks
使用`SET`语句来定义变量并为其赋值
使用`SET`语句来定义变量并为其赋值
173 4

相关实验场景

更多