vue v-model 与 组件化的表单组件如何沟通
参考mint-ui的代码：
https://github.com/ElemeFE/mint-ui/blob/master/packages/radio/src/radio.vue
https://github.com/ElemeFE/mint-ui/blob/master/packages/field/src/field.vue
直接上代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<style>
</style> <body>
<div id="app">
<div v-for='(item, index) in items' :key='index'>
<myradio v-model="picked" :text="item"></myradio>
</div>
<br>
<span>Picked: {{ picked }}</span>
</div>
</body>
<script>
// 局部注册组件
var myradio = Vue.extend({
data: function () {
return {
currentValue: this.value
}
},
props: {
value: '',
text: ''
},
template: `
<label>
<input type="radio" id="two" :value="text" v-model="currentValue">
<label for="two">{{ text }}</label>
</label>
`,
watch: {
value(val) {
this.currentValue = val;
},
currentValue(val) {
this.$emit('input', val);
}
}
}); Vue.component('myradio', myradio) new Vue({
el: '#app',
data: {
picked: 'Three',
items: ['One', 'Two', 'Three']
}
})
</script> </html>
vue v-model 与 组件化的表单组件如何沟通的更多相关文章
- vue（9）—— 组件化开发 - webpack（3）
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- vue（8）—— 组件化开发 - webpack（2）
webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack( ...
- vue项目中使用组件化开发
最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...
- Vue全家桶之组件化开发
Vue全家桶之组件化开发 一.组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代码 二. 组件注册 2.1 全局注册 Vue. ...
- 文档驱动 —— 表单组件（五）：基于Ant Design Vue 的表单控件的demo，再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
- 使用iview 的表单组件验证 Upload 组件
使用iview 的表单组件验证 Upload 组件 结果: 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码: <template> <div id ...
- 如何实现Ant design表单组件封装？
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- 文档驱动 —— 表单组件（六）：基于AntDV的Form表单的封装，目标还是不写代码
开源代码 https://github.com/naturefwvue/nf-vue3-ant 也不知道大家是怎么写代码的,这里全当抛砖引玉 为何封装? AntDV非常强大,效果也非常漂亮,功能强大, ...
- reactjs入门到实战（八）----表单组件的使用
表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...
随机推荐
- GO语言基础之并发concurrency
并发Concurrency 很多人都是冲着 Go 大肆宣扬的高并发而忍不住跃跃欲试,但其实从源码的解析来看,goroutine 只是由官方实现的超级“线程池”而已.不过话说回来,每个实例 4-5KB的 ...
- Dijkstra(迪杰斯特拉)算法求解最短路径
过程 首先需要记录每个点到原点的距离,这个距离会在每一轮遍历的过程中刷新.每一个节点到原点的最短路径是其上一个节点(前驱节点)到原点的最短路径加上前驱节点到该节点的距离.以这个原则,经过N轮计算就能得 ...
- [转载]Elasticsearch索引重建（Rebuild）
From:http://blog.csdn.net/changong28/article/details/38491185 索引重建(Rebuild) 索引创建后,你可以在索引当中添加新的类型,在类型 ...
- A5-1和DES两个加密算法的学习
A5-1加密算法 1.基本原理 A5-1加密算法是一种流password,通过密钥流对明文进行加密.然后用密钥流进行对密文的解密操作. 这样的算法主要用于GSM加密.也就是我们平时打电话的时候.通信数 ...
- SpringApplicationConfiguration 这个不能用 解决方案
使用的test包的版本号要与spring的一致,避免jar包依赖冲突 直接用注解 @RunWith(SpringRunner.class)@SpringBootTest @SpringApplicat ...
- Camel之AsyncProcessor
Camel支持一种更复杂的异步的处理模型,异步处理器实现一个继承自Processor接口的AsyncProcessor接口,使用异步Processor的长处: a.异步Processor不会因等待堵塞 ...
- 详解 Spring 3.0 基于 Annotation 的依赖注入实现
Spring 的依赖配置方式与 Spring 框架的内核自身是松耦合设计的.然而,直到 Spring 3.0 以前,使用 XML 进行依赖配置几乎是唯一的选择.Spring 3.0 的出现改变了这一状 ...
- 3DTouch - iOS新特性
概述 3DTouch是一种立体触控技术,被苹果称为新一代多点触控技术. 详细 代码下载:http://www.demodashi.com/demo/10708.html 6s和6s plus之后特有效 ...
- HDUOJ-----Be the Winner
此题用到的概念: [定义1]:若一堆中仅有一个石子,则被称为孤单堆.若大于1个,则称为充裕堆. [定义2]:T态中,若充裕堆的堆数大于等于2,则称为完全利他态,用T2表示:若充裕堆的堆数等于0,则称为 ...
- 如何用python的装饰器定义一个像C++一样的强类型函数
Python作为一个动态的脚本语言,其函数在定义时是不需要指出参数的类型,也不需要指出函数是否有返回值.本文将介绍如何使用python的装饰器来定义一个像C++那样的强类型函数.接下去,先介绍 ...