首先說下 父子組件傳遞值的問題：
父頁面?zhèn)鹘o子組件使用 props
子組件傳回給父頁面使用 emit
在以前的時(shí)候配喳，子組件的值傳回來后回窘，父頁面需要寫一個(gè)事件用來賦值势就，做不到自動(dòng)更新底哥。（具體怎么使用組件這里就不多說了）
本文就是為了解決這個(gè)麻煩的問題，效果就是谬擦，子組件封裝好后切距，父組件只需要使用 不需要做其他處理。
根據(jù)上面的問題惨远，下面寫一個(gè)組件用來計(jì)數(shù)textarea輸入的值的長度谜悟，有限制字?jǐn)?shù)的功能
(下面是基于vue element框架，ps：element里面有這個(gè)功能北秽，但是有些許不一樣)
element使用如下：
<el-input
type="textarea"
placeholder="請輸入內(nèi)容"
v-model="textarea"
maxlength="30"
show-word-limit
>
</el-input>
具體可查看element的文檔https://element.eleme.cn/#/zh-CN/component/input
下面介紹下本人自己寫的組件：（代碼為了可以直接拿去使用葡幸，有些冗余，可以直接滑到最底下看注意點(diǎn)）
//子組件完整代碼
<template>
<div class="mytextarea_wrap">
<div @mouseenter="ishover = true" @mouseleave="ishover = false" :class="{focusPar:isfocus,hoverPar:ishover}">
<el-input type="textarea"
v-model="value"
:autosize="autosize"
@input="changeFun"
@focus="isfocus = true"
@blur="isfocus = false"
:placeholder="placeholder">
</el-input>
<span class="mytextarea_count" :class="{focus:isfocus,hover:ishover}">{{value.length}}/{{limit}}</span>
</div>
<span class="mytextarea_tips" v-show="value.length>limit">輸入字符不能超過{{limit}}個(gè)字符</span>
</div>
</template>
<script>
export default {
data(){
return{
value : this.val || '',
isfocus : false,
ishover : false,
}
},
watch: {
val(nv){
this.value = nv;
}
},
props: {
autosize : {
type : Object,//Array 和 Object 默認(rèn)值必須使用函數(shù)return回來
default : function () {
return { minRows: 4, maxRows: 6 }
}
},
placeholder : String,
limit : {
type : [String, Number],
default : 500,
},
val : String,
},
methods:{
changeFun(){
this.$emit('update:val',this.value);
}
}
}
</script>
<style lang="scss">
@import '../sass/color';
.mytextarea_wrap{
.el-textarea__inner{
border-radius: 4px 4px 0 0;
border-bottom: none;
resize: none;
}
.mytextarea_count{
display: block;
width: 100%;
box-sizing: border-box;
font-size: 12px;
padding: 0 15px;
height: 24px;
line-height: 24px;
text-align: right;
border-radius: 0 0 4px 4px;
border: 1px solid #dcdfe6;
border-top: 0;
color: #999;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.mytextarea_count.focus{
border-color: $pageColor_blue !important;
}
.mytextarea_count.hover{
border-color: #C0C4CC;
}
.hoverPar{
textarea{
border-color: #C0C4CC;
}
}
.focusPar{
textarea{
border-color: $pageColor_blue !important;
}
}
.mytextarea_tips{
display: block;
height: 24px;
line-height: 24px;
color: $pageColor_red;
font-size: 12px;
}
}
</style>
父頁面使用如下：
<textarea-limitnew
:val.sync="applyServiceData.reason"
placeholder="請描述申請售后服務(wù)的具體原因"
limit="50"
></textarea-limitnew>
需要注意的幾個(gè)位置：
1.props 里面給默認(rèn)值的時(shí)候羡儿，如果type是Array 或 Object礼患，需要使用函數(shù)return回來，如上代碼props里面autosize
2.props 如果type是多個(gè)類型，可用數(shù)組表示缅叠，如上代碼props里面limit
3.props傳進(jìn)來的值 不能被更改悄泥，所以傳進(jìn)來的val， 我們使用value保存一下肤粱，然后操作value弹囚。另外有個(gè)問題，組件只會(huì)在創(chuàng)建的時(shí)候 賦值一次领曼，所以我在頁面加了個(gè)watch監(jiān)聽val鸥鹉，避免出現(xiàn)如下問題：比如我們有個(gè)彈框使用的是v-show，沒用v-if庶骄。彈框里面有這個(gè)組件毁渗，當(dāng)我們第一次打開彈框的時(shí)候val和value都為空，我們編輯后val和value都有值了单刁，然后在父頁面關(guān)掉彈框灸异，并且重置值。接下來再打開彈框的時(shí)候羔飞，會(huì)發(fā)現(xiàn)val在父頁面被清空了肺樟，但是value在子組件里面還是上次的值，所以需要加個(gè)watch再賦值一遍逻淌。（用v-if的話忽略這點(diǎn)）
4.如果想在父組件調(diào)用子組件里面的方法(比如函數(shù)名為childFun)么伯，可以給子組件加上ref="test"，在父組件中使用this.$refs.test.childFun()就可以調(diào)用到了
5.接下來這點(diǎn)就是本文的主題了卡儒。使用組件的時(shí)候帶上.sync修飾符田柔，然后在子組件里面emit的時(shí)候?qū)懛ㄈ缟洗athis.$emit('update:val',this.value);
update:val里面的val是傳進(jìn)來的值的字段名字。這樣子在父頁面就不需要賦值一次了骨望。
最后效果如下：
