vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
1,当我们自定义组件时如何使用v-model?
答:代码实例如下
2 我们在自定义组件中使用v-model的目的是什么?
答:自定义模板上定义v-mode目的是向外传递值,也就是向他的父组件传递值,影响父组件的属性,通过父组件的属性初始化自定义的子组件,然后在子组件上操作来与父组件达到交互目的
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.min.js"></script>
<title>Document</title>
</head> <body>
<template id="greetings">
<div>
<h1>父组件中的hk:{{ hk }}</h1>
<hr />
<!--这里我们将父组件中的hk的值传递给子组件zz的modelVal属性,112传递给子组件的kk-->
<zz v-model="hk" kk=""></zz>
</div>
</template> <template id="fff">
<label>
<!--这里的:checked是input自带属性，不是我们定义的，它的值是checkval方法计算的值-->
<!--:kk="kk"是上面我们使用zz组件时,我们写的 kk=，可以理解将112传递给kk,kk传递给:kk,因为我们在zz组件里定义了kk属性-->
<!--@change=update使我们定义一个监听函数,当点击这个radio时发生变化触发这个update方法-->
<input type="radio" :checked="checkVal" :kk="kk" @change="update" />
<!--这里我们打印我们自定义v-model属性值-->
这里打印父组件中调用子组件时传递hk的值给modelVal:{{ modelVal }}
<hr />
<!--这里我们用来查看checkVal值-->
checkVal:{{ checkVal }}
</label>
</template> <div id="app">
<greetings-component></greetings-component>
</div>
</body>
<script>
Vue.component('zz', {
template: '#fff',
model: {
prop: 'modelVal', //这里使我们定义的v-model属性,叫做modelVal,这里我们命名为modelVal
event: 'change'
},
props: {
modelVal: {
//这里我们要定义这个modelVal,才能在model中的prop中使用
type: String
},
kk: {
type: String
}
},
computed: {
checkVal() {
console.log('---in checkval');
console.log('this.modelVal:', this.modelVal); //这里打印this.modeVal值
console.log('kk:', this.kk); //打印传递给kk的值
console.log('---in checkval');
//这里返回的是false,表示没有被点击,然后我们再次点击
return false;
}
},
methods: {
update($event) {
console.log('---in update');
console.log('this.modelVal:', this.modelVal); //这里打印this.modeVal值
console.log('---in update');
var a = $event.target.checked;
this.$emit('change', $event.target.checked); //这里是返回给父组件,当我们点击radio时,选中了,返回true,影响了父组件中的hk的值
}
}
}); Vue.component('greetings-component', {
template: '#greetings',
data: function () {
return {
hk: 'greetings-component-hk'
};
}
}); /* eslint-disable no-new */
new Vue({
el: '#app'
});
</script> </html>
3,按照我的思路我们修改官方的例子
官方代码如下
<div id="app">
<greetings-component></greetings-component>
</div>
<template id="greetings">
<div>
<custom-input v-model="searchText"></custom-input>
{{ searchText }}
</div>
</template> <script>
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
}) Vue.component('greetings-component', {
template: '#greetings',
data: function() {
return { searchText: 'searchText'
};
}
}); /* eslint-disable no-new */
new Vue({
el: '#app'
});
</script>
然后按照我讲的思路,不用默认的value这个名称
<div id="app">
<greetings-component></greetings-component>
</div> <template id="greetings">
<div>
<custom-input v-model="searchText"></custom-input>
{{ searchText }}
</div>
</template> Vue.component('custom-input', {
model: {
prop: 'modelVal',
event: 'input' //这里我们监听input事件
},
props: {
modelVal: {
type: String
}
},
template: `
<input @input="hello v-bind:value="modelVal" v-on:input="$emit('input', $event.target.value)"
>
`
}); Vue.component('greetings-component', {
template: '#greetings',
data: function() {
return { searchText: 'searchText'
};
}
}); /* eslint-disable no-new */
new Vue({
el: '#app'
});
vue框架之自定义组件中使用v-model的更多相关文章
- 【vue】---- v-model在自定义组件中的使用
1. v-model简介 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定,它的本质是一个语法 ...
- Vue 框架-09-初识组件的应用
Vue 框架-09-初识组件的应用 今天的第一个小实例,初步使用组件: 在 app.js 中定义模板组件,在 html 文件中使用自定义标签来显示 js 文件中定义的 html 代码块 比如说,下面定 ...
- 微信小程序自定义组件的使用以及调用自定义组件中的方法
在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...
- 在自定义组件中获取spring底层组件
要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...
- vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
- Vue自定义组件中Props中接收数组或对象
原文:https://www.jianshu.com/p/904551dc6c15 自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[], ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- Vue.extend提供自定义组件的构造器
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
随机推荐
- 找不到UserDetails.java
真是一个奇葩的问题,dubbo接口 在controller中引用是可以正常的,但是放到service层中,就一直报找不到UserDetails.java,从路径看,看不出来是什么包里面的类 结果把路径 ...
- 第81讲：Scala中List的构造和类型约束逆变、协变、下界详解
今天来学习一下scala中List的构造和类型约束等内容. 让我们来看一下代码 package scala.learn /** * @author zhang */abstract class Big ...
- java的并发和多线程
本文主要讲解Java并发相关的内容,包括锁.信号量.堵塞队列.线程池等主要内容. 并发的优点和缺点 在讲述怎么利用多线程的情况下,我们先看一下采用多线程并发的优缺点. 优点 提高资源利用率 如读取一个 ...
- Spring @Autowired注解用在集合上面，可以保持接口的所有实现类
CourseService课程接口有2个子类,HistroyCourseServiceImpl和MathsCourseServiceImpl public interface CourseServic ...
- 【C#】转一篇MSDN杂志文：ASP.NET Pipeline: Use Threads and Build Asynchronous Handlers in Your Server-Side Web Code
序:这是一篇发表在2003年6月刊的MSDN Magazine的文章,现在已经不能在线阅读,只提供chm下载.讲的是异步请求处理那些事,正是我上一篇博文涉及的东西(BTW,事实上这篇杂志阐述了那么搞然 ...
- DevExpress中获取GridControl排序之后的List
public System.Collections.IList GetGridViewFilteredAndSortedData(DevExpress.XtraGrid.Views.Grid.Grid ...
- JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现
因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...
- MySQL赋权
MySQL 赋予用户权限命令的简单格式可概括为:grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利.grant select ...
- 一步步Cobol 400上手自学入门教程04 - 过程部
过程部的作用:编写程序要执行的语句,是程序的核心. 结构: 基本语句 INITIALIZE 设置数据项的初始值 ACCEPT 接收从键盘或指定设备上获得输入数据. 例子: 当批处理文件读到调用ACCP ...
- 【xsy2913】 enos 动态dp
题目大意:给你一棵 $n$个点 以 $1$为根 的树,每个点有$ 0,1,2 $三种颜色之一,初始时整棵树的颜色均为 $0$. $m$ 次操作, 每次操作形如: 1 x y c : 将 $x$到$y$ ...