Vue中使用model属性
vue中model属性的使用
·
model属性
官网介绍:
https://cn.vuejs.org/v2/api/#model
model属性接收两个参数
- 类型:
{ prop?: string, event?: string }
- prop 也就是调用该组件的父组件中使用
v-model
指令绑定的属性 - event 对应的是修改prop指定属性的值的函数
-
Example:
// 子组件 <template> <el-dialog :visible="visible" @close="onClose" > </el-dialog> </template> <script> export default { name: 'HDialog', model: { prop: 'visible', event: 'closeModal' }, props: { visible: { type: Boolean, default() { return false } } }, methods: { // 点击关闭抽屉层 onClose() { this.$emit('close') // 修改model中的值 this.$emit('closeModal', false) } } } </script>
// 父组件 <h-dialog v-model="visible"></h-dialog>
更多推荐
已为社区贡献3条内容
所有评论(0)