当前位置:网站首页>V-model of custom component
V-model of custom component
2022-07-02 02:45:00 【One plus one is not two】
vue Official website definition :
Two way binding
<input :value="something" @input="something = $event.target.value">
Grammatical sugar
<input v-model="something">
therefore
<custom-input v-model="something"></custom-input>
In custom components, it is equivalent to
<custom-input :value="something" @input="something = $event.target.value">
</custom-input>
Example
Parent component :
<template>
<el-form ref="form">
<el-form-item label=" department :">
<frame-select v-model="form.depidProp"></frame-select>
</el-form-item>
</el-form>
</template>
<script>
import frameSelect from './component/frameSelect.vue'
export default {
components: { frameSelect },
data() {
return {
form: {
depidProp:''
},
}
},
methods: { }
}
</script>
Child components
<template>
<el-select v-model="modelValue" @change="changeOrgList">
<el-option v-for="item in orgLevelList"
:label="item.name" :value="item.name" :key="item.id">
</el-option>
</el-select>
</template>
<script>
export default {
props: {
//value name
modelValue: {
type: [String,Number],
default: ''
},
},
data() {
return {
orgLevelList: [{id:1,name:' Organization Department '},{id:2,name:' The personnel department '},{id:3,name:' Technology Department '}]
}
},
model: {
prop: 'modelValue',//value name
event: 'changeOrgList',// The method that the child component needs to register to update the parent component value
},
methods: {
changeOrgList(val) {
this.$emit('changeOrgList', val)
}
}
}
</script>
边栏推荐
- Jointly developed by nailing, the exclusive functions of glory tablet V7 series were officially launched
- How to turn off the LED light of Rog motherboard
- Duplicate keys detected: ‘0‘. This may cause an update error. found in
- 2022-2028 global encryption software industry research and trend analysis report
- Vsocde has cli every time it is opened js
- [liuyubobobo play with leetcode algorithm interview] [00] Course Overview
- JS slow animation
- How to run oddish successfully from 0?
- Is bone conduction earphone better than traditional earphones? The sound production principle of bone conduction earphones is popular science
- QT使用sqllite
猜你喜欢
MySQL operates the database through the CMD command line, and the image cannot be found during the real machine debugging of fluent
【带你学c带你飞】3day第2章 用C语言编写程序(练习 2.3 计算分段函数)
QT implementation interface jump
Ten minutes will take you in-depth understanding of multithreading - multithreaded teamwork: synchronous control
As a software testing engineer, will you choose the bank post? Laolao bank test post
[reading notes] programmer training manual - practical learning is the most effective (project driven)
[learn C and fly] 1day Chapter 2 (exercise 2.2 find the temperature of Fahrenheit corresponding to 100 ° f)
研发中台拆分过程的一些心得总结
【liuyubobobo-玩转Leetcode算法面试】【00】课程概述
【读书笔记】程序员修炼手册—实战式学习最有效(项目驱动)
随机推荐
Leetcode face T10 (1-9) array, ByteDance interview sharing
[learn C and fly] 4day Chapter 2 program in C language (exercise 2.5 generate power table and factorial table
Use usedeferredvalue for asynchronous rendering
2022-2028 global aluminum beverage can coating industry research and trend analysis report
2022-2028 global encryption software industry research and trend analysis report
What is the function of the headphone driver
[road of system analyst] collection of wrong topics in enterprise informatization chapter
Build a modern data architecture on the cloud with Amazon AppFlow, Amazon lake formation and Amazon redshift
What is the difference between an intermediate human resource manager and an intermediate economist (human resources direction)?
LFM信号加噪、时频分析、滤波
[learn C and fly] 1day Chapter 2 (exercise 2.2 find the temperature of Fahrenheit corresponding to 100 ° f)
2022 low voltage electrician test question simulation test question bank simulation test platform operation
About DNS
If you want to rewind the video picture, what simple methods can you use?
es面試題
STM32__05—PWM控制直流电机
Use the open source project [banner] to achieve the effect of rotating pictures (with dots)
QT实现界面跳转
el-table的render-header用法
2022-2028 global deep sea generator controller industry research and trend analysis report