简书链接:uniapp和微信小程序转换后的一些对比笔记
文章字数：216,阅读全文大约需要1分钟
以前2016年写的组件 调用组件的方法用的是

1
2
var dialog = this.selectComponent("#dialog");
   dialog.showDialog();

而现在，之前用的一个大佬自动化转换的 发现用的是zpSelectComponent
实现的但是看上去是第三方的，在vue3这里好像不支持。
但是真的有必要这样嘛

直接给组件加个ref="dialog" ,然后 this.$refs.dialog.showDialog();
以前小程序绑定

1
<searchdialog id='dialog' distanceMonth="5" confirmSearchText='搜索' bind:onDismissDialog="onDismissDialog" bind:onShowDialog="onShowDialog" bind:onSearchClick="onSearchClick">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        confirmSearchText: {
            type: String,
            value: '开始搜索'
        },
        distanceMonth: {
            type: Number,
            value: 1
        }
    },

而现在，直接不需要bind.
uniapp

1
2
3
4

<userlogin id="dialog" ref="userlogin" confirmText="提交"
	@onSubmitClick="onSubmitLoginClick($event, { tagId: 'dialog' })" dialogtitle="登录"></userlogin>

props部分仅仅定义了这些

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	props: {
				dialogtitle: {
					type: String,
					default: '登录'
				},
				confirmText: {
					type: String,
					default: '登录'
				}

			},
````

事件 都大差不差
以前小程序写的
onSearchClick(e: any) {
    console.debug("收到了组件的onSearchClick ", e,e.detail.startdate, e.detail.enddate);
    var dialog = this.selectComponent("#dialog");
    dialog.dismissDialog();


},

而uniapp 几乎一模一样 ，除了selectComponent,这个直接refs直接控制就行，