上一篇博客,博主对vue.set和this.xxx赋值属性做了说明,但究竟要怎么来定义属性和进行赋值呢?同时这里也牵涉到如何来自定义一个控件,类似于weex-ui中的那些写好的组件组件,可以直接调用的。
效果图如下:
这里要特别说明下,在网页上不知道什么原因传值失败,效果图如下:
传值有问题,但使用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,什么都帮你做好,你只需要下载运行就可以了:点击下载