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

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

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

<navbar :isSearch="true" @input="inputChange" v-model="value"></navbar>

子组件,使用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)
			}
		}
	}