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 注:全局或局部注册的组件称为子组件,其中声明的 ...
随机推荐
- Nodejs入门【转载】保留备用
关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版. ...
- Ng第九课：神经网络的学习(Neural Networks: Learning)
9.1 代价函数 9.2 反向传播算法 9.3 反向传播算法的直观理解 9.4 实现注意:展开参数 9.5 梯度检验 9.6 随机初始化 9.7 综合起来 9.8 自主驾驶 9.1 ...
- （最短路 弗洛伊德） Til the Cows Come Home -- POJ --2387
#include <iostream> #include <cstdlib> #include <cstring> #include <cstdio> ...
- CentOS 5 上配置 Redmine 和 Git
现在我们用 Trac + Git 来管理所有的项目,早些时候是由 Trac + Subversion 管理的,和 Git 比较起来 Subversion 简直就是龟速.虽然我们前段时间换成了 Git ...
- curl工具介绍和常用命令
curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.Linux发行版中,并且有DOS和Win32.Win64的移植版本.curl是一个利用URL规则在命令行下工作的文 ...
- 怎样去写线程安全的代码(Java)
使用多线程就可能会存在线程安全的问题.很多 java 程序员对写多线程都很挣扎,或者仅仅理解那些是线程安全的代码,那些不是.这篇文章我并不是详述线程安全,详述同步机制的文章,相反我只是用一个简单的非线 ...
- poj 2449 k短路+A*算法
http://poj.org/problem?id=2449 K短路的定义: 1.如果起点终点相同,那么0并不是最短路,而是要出去一圈回来之后才是最短路,那么第K短路也是一样. 2.每个顶点和每条边都 ...
- node API
看了这么久nodejs,它包含哪些基础的API,自己心中都没有数,该完整地看看基础的API了. 见过的: assert:编写程序的单元测试用例 buffer:直接处理2进制数据 child_proce ...
- bootstrap2.2相关文档
本节课我们主要学习一下 Bootstrap表单和图片功能,通过内置的 CSS定义,显示各种丰富的效果. 一．表单 Bootstrap提供了一些丰富的表单样式供开发者使用. 1.基本格式 //实现基本的 ...
- DXP快捷键记录（红色为经常用到的）
dxp快捷键 1.设计浏览器快捷键:鼠标左击 选择鼠标位置的文档鼠标双击 编辑鼠标位置的文档鼠标右击 ...