自定义组件 v-model 的使用
2024-10-10 08:49:58
关于自定义组件如何使用 v-model，本章直讲如何使用：
一、 $emit('input', params)
// 父组件中
<template>
<article>
{{flag}}
<button @click="flag = !flag">点击</button>
<Child v-model="flag"></Child>
</article>
</template>
<script>
import Child from ‘./child'
export default {
data:function(){
return{
flag: true,
}
},
components:{
Child
}
}
</script> //子组件中
<template>
<article>
{{value}}
<Button @click="$emit('input',!value)">点击</Button>
</article>
</template>
<script>
export default {
props:{
value: Boolean,
}
}
</script>
二、通过在model属性中自定义事件：
//父组件中；
<template>
<article>
{{flag}}
<button @click="flag = !flag">点击</button>
<Child v-model="flag"></Child>
</article>
</template>
<script>
import Child from './child'
export default {
data:function(){
return{
flag: true,
}
},
components:{
Child
}
}
</script> //子组件中：
<template>
<article>
{{flag}}
<Button @click="$emit('on-visible-change', !flag)">点击</Button>
</article>
</template>
<script>
export default {
props:{
flag: Boolean,
},
model: {
prop: 'flag',
event: 'on-visible-change',
},
}
</script>
最新文章
- stanford corenlp的TokensRegex
- 查询Oracle正在执行和执行过的SQL语句
- Why we need model on Django ?
- MYSQL IN 与 EXISTS 的优化示例
- MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题，答案是不能的！
- Flex Array内置排序方法的使用
- 程序员面试宝典题目重温-P1-100
- Android Studio错误
- word2vec 中的数学原理具体解释（五）基于 Negative Sampling 的模型
- Xtrabackup全量备份与恢复mysql数据库
- .NET Framework不同组件区别及安装注意事项
- （三）Knockout 控制流程
- Glass Dragon
- JS的Ajax和同源策略
- 尚硅谷springboot学习29-docker常用命令和操作
- eclipse安装失败
- PhantomJS框架（初识无头浏览器）
- java项目显示红叉，程序却没有错误
- Lifting the Stone(hdu1115)多边形的重心
- asp.net <asp:Repeater>下的radio的单选使用