uniapp使用nvue组件_vue3 ui框架

uniapp使用nvue组件_vue3 ui框架1.在pagejson中申明nvue{ "path":"pages/detail/detail", "style":{ "navigationBarTitleText":"商品详情", "app-plus":{ "titleNView":false, "subNVues":[{ "id":"goodsBottom",...

1.在pagejson中申明nvue

{
			"path": "pages/detail/detail",
			"style": {
				"navigationBarTitleText": "商品详情",
				"app-plus": {
					"titleNView": false,
					"subNVues": [{
						"id": "goodsBottom",
						"path": "pages/detail/subnvue/goodsBottom",
						"style": {
							"type": "popup",
							"position": "dock",
							"dock": "bottom",
							"width": "750upx",
							"height": "100upx",
							"zindex": 2
						}
					},
					{
						"id": "goodsSpec",
						"path": "pages/detail/subnvue/goodsSpec",
						"type": "popup",
						"style": {
							"width": "750upx",
							"top":  "20%",
							"bottom": "0upx",
							"zindex": 3

						}
					},{
						"id": "coupon",
						"path": "pages/detail/subnvue/coupon",
						"type": "popup",
						"style": {
							"width": "750upx",
							"top":  "50%",
							"bottom": "0upx",
							"zindex": 3
						}
					},{
						"id": "share",
						"path": "paltform/app-plus/subNVue/shareDetail",//这个放在pages外部目录的nvue
						"type": "popup",
						"style": {
							"width": "750upx",
							"height":"250upx",
							"bottom": "0upx",
							"zindex": 3
						}
					}]
				}
			}
		}
只听到从架构师办公室传来架构君的声音:
道别来、浑是不关心,东堂桂。有谁来对上联或下联?

2.要是放在pages同级目录需要注意坑

uniapp使用nvue组件_vue3 ui框架

3.vue和nvue之间的通讯

①在vue向nvue通讯

此代码由Java架构师必看网-架构君整理
methods:{ collect(){ // #ifdef APP-PLUS //触发监听 并传值 uni.$emit('goods_bottom_setval',{isCollected:this.isCollected}) // #endif } }

②在nvue

    created() {
              //监听vue中的事件
			const vm = this;
			uni.$on('goods_spec_setval', (data) => {

				console.log('goods_spec_setval', data.product)
				this.detail=data.detail
				for (var key in data) {
					vm[key] = data[key]
				}
				// vm.title = data.title;
				// vm.content = data.content;
				//console.log(vm.product.Products_JSON.imgPath)
			})
		},
		beforeDestroy() {
			uni.$off('goods_spec_setval')
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			addCart() {
				// if (!this.$fun.checkIsLogin(1, 1)) {
				//     return;
				// }
				uni.$emit('cartHandle', {});
                //向vue发送监听  cartHandle   vue页面监听
			},
			directBuy() {

				// if (!this.$fun.checkIsLogin(1, 1)) {
				//     return;
				// }
				uni.$emit('directHandle');
			},
			lingqu() {
				if (this.canSubmit) {
					this.$emit('goGet')
				}
			}
		}

③在vue页面的监听和取消监听

此代码由Java架构师必看网-架构君整理
onLoad: function (option) { // #ifdef APP-PLUS //条件编译只在app才会使用nvue 监听nvue传递的函数 const vm = this; //控制nvue的显示和隐藏 show hide 通过pages.json的id const subNVue2 = uni.getSubNVueById('goodsBottom') subNVue2.show() uni.$on('cartHandle', (data) => { vm.addCart() //调用vue当前的方法 }) uni.$on('directHandle',(data)=>{ vm.directBuy() }) uni.$on('kefu', (data) => { vm.contact() }) uni.$on('collectHandle',(data)=>{ console.log('触发收藏事件') vm.collect() }) uni.$on('getMyCoupon',(data)=>{ console.log('触发领取事件') vm.getMyCoupon(data.item,data.i) }) uni.$on('goNextPage',(data)=>{ console.log('触发优惠券下一页事件') vm.goNextPage() }) uni.$on('shareDetail',(data)=>{ if(data.detail!='detail') return console.log('触发普通详情分享') vm.shareFunc(data.item) }) uni.$on('goodsSkuSub',(data)=>{ if(data.detail!='detail') return //因为多个使用同一nvue 所以根据传递的值 判断,不然后多个地方触发 console.log('触发这么多次事件????') let {check_attr,check_attrid_arr,submit_flag,postData} = data this.check_attr = check_attr this.check_attrid_arr = check_attrid_arr this.submit_flag = submit_flag this.postData = postData vm.skuSub() //隐藏规格框 const goodsSpecNvue = uni.getSubNVueById('goodsSpec') goodsSpecNvue.hide() }) uni.$on('goGet',(data)=>{ console.log('触发立即领取') vm.lingqu() }) // #endif }, mounted(){ }, onUnload(){ // #ifdef APP-PLUS //条件编译 关闭监听 如果不写关闭 在安卓会卡死重启 uni.$off('cartHandle') uni.$off('directHandle') uni.$off('collectHandle') uni.$off('getMyCoupon') uni.$off('goNextPage') uni.$off('shareDetail') uni.$off('kefu') uni.$off('goodsSkuSub') uni.$off('goGet') // #endif },

 

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/210012
0
   

发表评论