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 注:全局或局部注册的组件称为子组件,其中声明的 ...
随机推荐
- 5.Vue临时上传文件夹
1.在项目目录中,通过npm install multiparty进行安装必要组件npm install multiparty --save-dev 2.app.js中添加app.use(bodyPa ...
- MapGIS计算瓦片数据集
https://www.docin.com/p-2103834433.html
- 准备用有人云平台和tlink.io云平台和电脑做云转发
初步想的是用有人做国网电表转发,用tlink.io做综合采集模块转发,耗时一天 然后用tlink.io的做二次前端开发,耗时两天 用有人做二次前端开发,耗时两天 最后可以试试用常见的OPC公网转发到这 ...
- 《mysql必知必会》学习_第六章_20180730_欢
第六章<过滤数据> P35 1. select prod_name,prod_price from products where prod_price=2.5; 2.select prod ...
- python函数知识
一.三目运算 也叫三元运算,例如result=x if x<y else y 二.集合(set) 返回主页集合(set):把不同的元素组成一起形成集合,是python基本的数据类型.集合元素(s ...
- 解决toad中number类型小数位数过长按科学计数法显示的问题
在toad中->view->option->data->display large number in scientific notation,不选择该选项即可. (在pl/s ...
- Mac下替代Total Commander的工具推荐
[推荐]:Nimble Commander 轻量小巧,免费版与收费版区别不大,比较稳定,支持sftp等其他网络存储,支持自定义热键,预览等. http://magnumbytes.com/ [其他]: ...
- Python 高级编程——单例模式
单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. 在 Py ...
- MicrosoftSQLServer数据库定时备份（备份计划）的几种方式
首先,做备份计划钱,先要查看下SQL Server代理是否开启 进入主题 1.备份计划方式1: 1.1新增数据库备份作业: 备份脚本: declare @name varchar() ))+'.bak ...
- Asp .Net core 2 学习笔记(3) —— 静态文件
这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...