【vue】怎么给vue自定义组件加上v-model？

小孟js

已于 2022-07-04 11:19:47 修改

阅读量823

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-02-25 17:55:36 首次发布

本文链接：https://blog.csdn.net/qq_39576711/article/details/123138190

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件内部使用model对象，event是触发的事件，名字随意，prop是data里边的变量，名字随意。其他没写的data属性不用在意，因为是从项目里拿出来的，为了让model更清晰，就删掉了。主要看箭头指向部分。

<template>
    <div>
        <Selector 
            :options="options"
            @changeSelect="changeSelect"// < ====================
            :selectedValue="myValue"// < ====================
            :key="options.length" 
            value="value" 
            label="label" 
            title="房屋状态">
        </Selector>
    </div>
</template>
<script>
export default {
    model:{// < ====================
        event:"myChange",// < ====================
        prop:"value"// < ====================
    },
    props:{
    	value:[String,Number]
    },
    watch:{
    	value:{
    		handler(val){
				this.myValue = val
			},
    	}
    },
    data(){
        return {
            myValue:""// < ====================
        }
    },
    methods:{
		changeSelect(val){
            this.$emit("myChange",val)// < ====================
		}
	}
}
</script>