自定义组件是移动开发中会经常用到，封装一个功能组件，或者业务组件，可以高效的帮助自己开发，同时提高阅读，共用性，规范性。在uni-app中有大量的组件，系统自带的或者插件市场或者项目自己定义都很常见。
目前记录下uni-app中自定义组件的双向绑定
1.1 页面使用自定义组件 page-head
<page-head :title="title" @change = "onChange" v-model="isTitle"></page-head>
//其中:title="title"可以是title="title"
//但是
//当传递的是Boolean的时候，需要写成:isShow="false"
1.2 定义普通的标题 page-head
- 组件通过props接收页面参数
- 组件通过this.$emit("input",'')修改页面v-model的值
- 组件通过this.$emit("change",{})回调页面设置的方法
<template name="page-head">
<view class="common-page-head">
<view class="common-page-head-title" @click="titleClick">{{title}}</view>
</view>
</template>
<script>
/**
* @property {Number} value/v-model 双向绑定
* @event {Function} change
*/
export default {
name: "page-head",
props: {
title: {
type: String,
default: ""
},
modelValue: {
type: [Number, String],
default: 0
},
isShow: {
type: Boolean,
default: false
},
},
methods: {
titleClick(){
//修改外部的值
this.$emit("input", newVal)
// #ifdef VUE3
this.$emit("update:modelValue", newVal)
// #endif
//方法的监听回调
this.$emit("change", {
value: '1'
});
}
}
}
</script>
<style>
</style>
