uni-app组件和组件之间的双向绑定

痛定思痛。 2022-10-09 04:48 705阅读 0赞

**父组件中的子组件使用v-model,在子组件的props中也可以接收,实现组件和组件之间的双向绑定**

![2021062320520294.png][]

父组件中引入了子组件narbar, 并绑定了value

子组件,使用props接收并进行监听, 然后使用this.$emit将变化的值又发送给父组件

export default {
    		name: "navbar",
    		props:{
    			value:{
    				type:[String,Number],
    				default:''
    			},
    			isSearch:{
    				type:Boolean,
    				default:false
    			}
    		},
    		data() {
    			return {
    				statusBarHeight: 20,
    				navbarHeight: 45,
    				windowWidth: 375,
    				val:''
    			};
    		},
    		watch:{
    			value(newVal){
    				this.val = newVal
    			}
    		},
    		// 组件加载
    		created() {
    			// 同步获取手机系统信息
    			let info = uni.getSystemInfoSync()
    			// 动态设置状态栏高度
    			this.statusBarHeight = info.statusBarHeight
    			// 设置搜索框的宽度
    			this.windowWidth = info.windowWidth
    
    			/* 条件编译 不等于这三个平台 , 只会在微信小程序,QQ,百度小程序运行*/
    			// #ifndef H5 || MP-ALIPAY || APP-PLUS
    			/* 动态设置导航栏的高度 */
    			// 获取胶囊位置
    			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    			// 导航栏高度 = (胶囊底部 - 状态栏高度) + (胶囊顶部 - 状态栏高度)
    			this.navbarHeight = (menuButtonInfo.bottom - this.statusBarHeight) + (menuButtonInfo.top - this
    				.statusBarHeight)
    			// 设置搜索框的宽度
    			this.windowWidth = menuButtonInfo.left
    			// #endif
    		},
    		methods:{
    			open(){
    				if(this.isSearch) return
    				uni.navigateTo({
    					url: '/pages/home-search/home-search'
    				});
    			},
    			// 监听输入框的变化
    			inputChange(e){
    				let {value} = e.detail
    				this.$emit('input',value)
    			}
    		}
    	}

[2021062320520294.png]: /images/20221005/175c7c1335d34f9da31ab7ef42b244f6.png