关于自定义组件如何使用 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>

自定义组件 v-model 的使用的更多相关文章

  1. vue 自定义封装组件 使用 model 选项

    自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同 ...

  2. Android开发之自定义组件和接口回调

    说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的.在这篇博客开始的时候呢,我想聊一下iOS的自定义控件.在iOS中自定义控件的思路是继承自UIView, 在UIVie ...

  3. Android自定义组件

    [参考的原文地址] http://blog.csdn.net/l1028386804/article/details/47101387效果图: 实现方式: 一:自定义一个含有EditText和Butt ...

  4. 自定义组件之MoreListView

    前言 本文针对自定义组件进行一些分析.还是那句老话“授之于鱼不如授之以渔”.今天要讲的是一个自定义的可以分页的ListView. 网上都讲了些ListView分页的方法,那么为什么我在这里还需要自己写 ...

  5. axure复用-自定义组件,母版(模板)

    组件(控件)是用于设计线框图的用户界面元素.在组件(控件)面板中包含有常用的控件库,如按钮.图片.文本框等.从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件.组件可以从一个线框图中被拷贝(C ...

  6. ExtJS 自定义组件

    主要参考的是官方文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. 如何在自定义组件中使用v-model

    文章属于速记,有错误欢迎指出.风格什么的不喜勿喷. 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <div c ...

  8. 仿照admin的stark自定义组件的功能实现

    仿照admin的stark自定义组件的功能实现:其中最主要的就是增删改查的实现 1.查:首先页面中显示表头和数据,都是动态的,而不是写死的. (1) 先看表头和表单数据:这个是查看的视图函数,但是为了 ...

  9. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  10. 自定义组件v-model的实质性理解

    用了几个月Vue一直很纠结自定义组件的v-model实现,最近开始学习React时,React中受控组件与状态提升的理念与v-model不谋而合. 转载请注明地址: https://www.cnblo ...

随机推荐

  1. Java基础——JavaDoc生成文档

    JavaDoc生成文档  package Top1; ​ /**  * @author lwt  * @version 1.0  * @since 1.8  *  */ ​ public class ...

  2. Java线程基础及多线程的实现

    一.进程和线程 1.进程:正在运行的程序         是系统进行资源分配和调用的独立单位         每一个进程都有它自己的内存空间和系统资源 2.线程是进程中的单个顺序控制流,是一条执行路径 ...

  3. 线程休眠_sleep

    线程休眠_sleep sleep(时间)指定当前线程阻塞的毫秒数: sleep存在异常InterruptedException: sleep时间到达后线程进入就绪状态: sleep可以模拟网络延时,倒 ...

  4. 4、关于numpy.random.seed()的使用说明

    定义:seed( ) 用于指定随机数生成时所用算法开始的整数值,如果使用相同的seed( )值,则每次生成的随即数都相同,如果不设置这个值,则系统根据时间来自己选择这个值,此时每次生成的随机数因时间差 ...

  5. Spring Boot自动配置原理与实践(二)

    前言 在之前的博文(Spring Boot自动配置原理与实践(一))中,已经介绍了Spring boot的自动配置的相关原理与概念,本篇主要是对自动配置的实践,即自定义Starter,对原理与概念加深 ...

  6. linux基础操作命令合集(一)

    linux基础操作命令合集(一) 目录 linux基础操作命令合集(一) 一.命令行提示符 二.切换用户 三.主机名称命令 3.1.临时设置主机名 3.2.永久设置主机名 四.查看系统版本 五.网卡相 ...

  7. SpringBoot开发十七-事务管理

    需求介绍 熟悉事务管理. 什么是事务 事务是由N步数据库操作序列组成的逻辑执行单元,这系列操作要么全执行,要么全放弃执行. 事务的特性(ACID) 原子性(Atomicity):事务是应用中不可再分的 ...

  8. QZEZTEST2021.7.27分析

    T1 qzez 错误检测 题意 思路 代码 T2 qzez 比赛 题意 题面 有\(AB\)两队,每队\(n\)人,两队间进行\(n\)场比赛,每个人都要参赛,对手随机且概率均等.每人都有一个实力值, ...

  9. JavaScript-DOM-节点简介与分类

    简介 节点(node)是一个网络术语,它表示网络中的一个连接点.一个网络就是由一些节点构成的集合. 在DOM里,文档是由节点构成的集合,此时的节点是文档树上的树枝和树叶. 分类 DOM中包含许多不同类 ...

  10. HTML界的“苏炳添”——详解Canvas优越性能和实际应用

    Google Docs宣布将会把HTML迁移到基于Canvas渲染,这一消息的出现再次把几年前随HTML5诞生的标签重新推到了人们视线之中.Canvas在刚推出时主打的优势就是更快的渲染速度,堪称HT ...