最近在寫(xiě)組件時(shí)，考慮到子組件的狀態(tài)需要實(shí)時(shí)反饋給父組件，于是想起來(lái)了v-model，下面介紹一下自定義組件中的簡(jiǎn)單使用

?

官網(wǎng)介紹不是很清晰，這個(gè)默認(rèn)的input事件很容易讓人產(chǎn)生誤解，其實(shí)個(gè)人建議還是不要使用默認(rèn)的prop和event，盡量重新定義。

我的子組件

<template><div><el-select v-model="id" style="margin-bottom:20px" @change="handleChange" :multiple="multiple"><el-option class="item" v-for="item in channelArr" :key="item.channel" :label="item.channel + ' ' + item.name" :value="item.channel"><div v-if="item.pic"><img class="item-icon" :src="item.pic" alt=""><span>{{item.channel + ' ' + item.name}}</span></div></el-option></el-select></div> </template><script>import {getChannelAPI,} from '@/api/data' export default {name: 'UserChannel',model: {prop: 'id', // 坑點(diǎn) 這里官方文檔和props是一個(gè)名字，都是checked 但在使用過(guò)程中會(huì)報(bào)錯(cuò)，多番排查后， 將model里的prop新定義一個(gè)名字，為了保證和props里父組件傳過(guò)來(lái)的channelId一致，在子組件data中進(jìn)行賦值，就不再報(bào)錯(cuò)了。event: 'change' // event 名稱可以隨便起 emit 里對(duì)應(yīng)就行，這里配合業(yè)務(wù)起的是change },
// 如果model不寫(xiě)就會(huì)走默認(rèn)的model prop：value , event : input 不要被input所迷惑，并不一定代表js的oninput事件props: {hasChange:{type: Boolean,default: false},channelId:{type:String,default:''},multiple:{type:Boolean,default:false}},data() {return {channelArr: [],id:this.channelId}},created(){this.getChannel()},methods: {getChannel() {if (this.channelArr.length == 0) {getChannelAPI().then(response => {this.channelArr = response.data.channeArr;});}},handleChange(event){// this.$emit('someProp', [returnValueToParent]) returnValueToParent 是什么，父組件的v-model 就是多少this.$emit('change', event);if(this.hasChange){this.$emit('fetch', event)}},} } </script> <style scoped> .item{margin-bottom: 6px; } .item-icon{width: 30px;height: 30px;vertical-align: middle;border-radius: 50%;margin-right: 20px; } </style>

父組件

<template><div><user-channel v-model="channel"></user-channel>
　　　　</div> <template><script>import UserChannel from '@/components/UserChannel'export default {components:{UserChannel},data() {return {channel:'' }...... </script>

主要的坑就是變量問(wèn)題，已經(jīng)寫(xiě)在子組件里了。比傳統(tǒng)的父子組件傳值還是更好用的。

?

轉(zhuǎn)載于:https://www.cnblogs.com/wuyuchao/p/10423570.html

總結(jié)

以上是生活随笔為你收集整理的vue v-model 简单使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。