当前位置:网站首页>自定义组件的 v-model
自定义组件的 v-model
2022-07-02 02:42:00 【一加一不是二】
vue官网定义:
双向绑定
<input :value="something" @input="something = $event.target.value">
语法糖
<input v-model="something">
所以
<custom-input v-model="something"></custom-input>
在自定义组件中相当于
<custom-input :value="something" @input="something = $event.target.value">
</custom-input>
例子
父组件:
<template>
<el-form ref="form">
<el-form-item label="部门:">
<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>
子组件
<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名
modelValue: {
type: [String,Number],
default: ''
},
},
data() {
return {
orgLevelList: [{id:1,name:'组织部'},{id:2,name:'人事部'},{id:3,name:'技术部'}]
}
},
model: {
prop: 'modelValue',//value名
event: 'changeOrgList',//子组件要更新父组件值需要注册的方法
},
methods: {
changeOrgList(val) {
this.$emit('changeOrgList', val)
}
}
}
</script>
边栏推荐
- [staff] diacritical mark (ascending sign | descending sign B | double ascending sign x | double descending sign BB)
- Sword finger offer II 031 Least recently used cache
- Build a modern data architecture on the cloud with Amazon AppFlow, Amazon lake formation and Amazon redshift
- Types of exhibition items available in the multimedia interactive exhibition hall
- Actual battle of financial risk control - under Feature Engineering
- Set status bar color
- Feature query of hypergraph iserver rest Service
- CVPR 2022 | Dalian Institute of technology proposes a self calibration lighting framework for low light level image enhancement of real scenes
- [JSON] gson use and step on the pit
- [Chongqing Guangdong education] Sichuan University concise university chemistry · material structure part introductory reference materials
猜你喜欢
LeetCode刷题(十)——顺序刷题46至50
【带你学c带你飞】3day第2章 用C语言编写程序(练习 2.3 计算分段函数)
MongoDB非关系型数据库
What kind of good and cost-effective Bluetooth sports headset to buy
Systemserver service and servicemanager service analysis
CSDN article underlined, font color changed, picture centered, 1 second to understand
Which brand of running headphones is good? How many professional running headphones are recommended
Ten minutes will take you in-depth understanding of multithreading - multithreaded teamwork: synchronous control
Pat a-1165 block reversing (25 points)
Cesium dynamic diffusion point effect
随机推荐
Pat a-1165 block reversing (25 points)
How to create an instance of the control defined in SAP ui5 XML view at runtime?
[staff] pitch representation (treble clef | C3 60 ~ B3 71 pitch representation | C4 72 pitch representation | C5 84 pitch representation)
Quality means doing it right when no one is looking
连通块模板及变式(共4题)
Calculation (computer) code of suffix expression
设置状态栏颜色
Realize the code scanning function of a custom layout
Start from scratch - Web Host - 01
es面试题
What is the principle of bone conduction earphones and who is suitable for bone conduction earphones
研发中台拆分过程的一些心得总结
Remote connection to MySQL under windows and Linux system
Is bone conduction earphone better than traditional earphones? The sound production principle of bone conduction earphones is popular science
PHP notes - use Smarty to set public pages (include, if, else, variable settings)
Divorce for 3 years to discover the undivided joint property, or
【带你学c带你飞】day 5 第2章 用C语言编写程序(习题2)
C return multiple values getter setter queries the database and adds the list return value to the window
How does proxy IP participate in the direct battle between web crawlers and anti crawlers
Coordinatorlayout + tablayout + viewpager2 (there is another recyclerview nested inside), and the sliding conflict of recyclerview is solved