自定义组件 v-model 的使用
关于自定义组件如何使用 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 的使用的更多相关文章
- vue 自定义封装组件 使用 model 选项
自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同 ...
- Android开发之自定义组件和接口回调
说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的.在这篇博客开始的时候呢,我想聊一下iOS的自定义控件.在iOS中自定义控件的思路是继承自UIView, 在UIVie ...
- Android自定义组件
[参考的原文地址] http://blog.csdn.net/l1028386804/article/details/47101387效果图: 实现方式: 一:自定义一个含有EditText和Butt ...
- 自定义组件之MoreListView
前言 本文针对自定义组件进行一些分析.还是那句老话“授之于鱼不如授之以渔”.今天要讲的是一个自定义的可以分页的ListView. 网上都讲了些ListView分页的方法,那么为什么我在这里还需要自己写 ...
- axure复用-自定义组件,母版(模板)
组件(控件)是用于设计线框图的用户界面元素.在组件(控件)面板中包含有常用的控件库,如按钮.图片.文本框等.从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件.组件可以从一个线框图中被拷贝(C ...
- ExtJS 自定义组件
主要参考的是官方文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 如何在自定义组件中使用v-model
文章属于速记,有错误欢迎指出.风格什么的不喜勿喷. 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <div c ...
- 仿照admin的stark自定义组件的功能实现
仿照admin的stark自定义组件的功能实现:其中最主要的就是增删改查的实现 1.查:首先页面中显示表头和数据,都是动态的,而不是写死的. (1) 先看表头和表单数据:这个是查看的视图函数,但是为了 ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
- 自定义组件v-model的实质性理解
用了几个月Vue一直很纠结自定义组件的v-model实现,最近开始学习React时,React中受控组件与状态提升的理念与v-model不谋而合. 转载请注明地址: https://www.cnblo ...
随机推荐
- Java基础——JavaDoc生成文档
JavaDoc生成文档 package Top1; /** * @author lwt * @version 1.0 * @since 1.8 * */ public class ...
- Java线程基础及多线程的实现
一.进程和线程 1.进程:正在运行的程序 是系统进行资源分配和调用的独立单位 每一个进程都有它自己的内存空间和系统资源 2.线程是进程中的单个顺序控制流,是一条执行路径 ...
- 线程休眠_sleep
线程休眠_sleep sleep(时间)指定当前线程阻塞的毫秒数: sleep存在异常InterruptedException: sleep时间到达后线程进入就绪状态: sleep可以模拟网络延时,倒 ...
- 4、关于numpy.random.seed()的使用说明
定义:seed( ) 用于指定随机数生成时所用算法开始的整数值,如果使用相同的seed( )值,则每次生成的随即数都相同,如果不设置这个值,则系统根据时间来自己选择这个值,此时每次生成的随机数因时间差 ...
- Spring Boot自动配置原理与实践(二)
前言 在之前的博文(Spring Boot自动配置原理与实践(一))中,已经介绍了Spring boot的自动配置的相关原理与概念,本篇主要是对自动配置的实践,即自定义Starter,对原理与概念加深 ...
- linux基础操作命令合集(一)
linux基础操作命令合集(一) 目录 linux基础操作命令合集(一) 一.命令行提示符 二.切换用户 三.主机名称命令 3.1.临时设置主机名 3.2.永久设置主机名 四.查看系统版本 五.网卡相 ...
- SpringBoot开发十七-事务管理
需求介绍 熟悉事务管理. 什么是事务 事务是由N步数据库操作序列组成的逻辑执行单元,这系列操作要么全执行,要么全放弃执行. 事务的特性(ACID) 原子性(Atomicity):事务是应用中不可再分的 ...
- QZEZTEST2021.7.27分析
T1 qzez 错误检测 题意 思路 代码 T2 qzez 比赛 题意 题面 有\(AB\)两队,每队\(n\)人,两队间进行\(n\)场比赛,每个人都要参赛,对手随机且概率均等.每人都有一个实力值, ...
- JavaScript-DOM-节点简介与分类
简介 节点(node)是一个网络术语,它表示网络中的一个连接点.一个网络就是由一些节点构成的集合. 在DOM里,文档是由节点构成的集合,此时的节点是文档树上的树枝和树叶. 分类 DOM中包含许多不同类 ...
- HTML界的“苏炳添”——详解Canvas优越性能和实际应用
Google Docs宣布将会把HTML迁移到基于Canvas渲染,这一消息的出现再次把几年前随HTML5诞生的标签重新推到了人们视线之中.Canvas在刚推出时主打的优势就是更快的渲染速度,堪称HT ...