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 注:全局或局部注册的组件称为子组件,其中声明的 ...
随机推荐
- day2（基础数据类型）
一.基础数据类型操作 1.数字 int 数字主要是用于计算用的,使用方法并不是很多,就记住一种就可以: int.bit_length() -> int Number of bits necess ...
- 《it项目管理那些事》学习笔记
此书适合:计算及相关专业的学生,想成为测试工程师.软件工程师.进入项目经理的人,或者经验丰富的it经理人. 之所以称为学习笔记,是加上我从百度搜到一些在看书过程中不明白的it语,作为菜鸟的我,得多看看 ...
- 关于能量场和力场弯曲空间的实验证明 EXPERIMENTAL PROOF ON THE BENDING SPACE OF ENERGY FIELD AND FORCE FIELD
前文提到,F = ma, E = mc^2,并且等效是传递的,等效概念具有同属性.所以不止能量,力场也可以弯曲空间. 实验:某人被头顶上方的电站10几万伏的设备吸收,烧毁双臂. (虽然这个实验不应具有 ...
- Redis-HA高可用方案Sentinel配置
上一节中介绍了master-slave模式,在最小配置:master.slave各一个节点的情况下,不管是master还是slave down掉一个,“完整的”读/写功能都将受影响,这在生产环境中显然 ...
- JS学习笔记3_函数表达式
1.函数表达式与函数声明的区别 函数声明有“提升”(hoisting)的特性,而函数表达式没有.也就是说,函数声明会在加载代码时被预先加载到context中,而函数表达式只有在执行表达式语句时才会被加 ...
- .net core在vs开发环境下脱离iis运行
.net core相比之前.net的是一个可以跨平台,脱离iis运行的语言,并且项目启动的效率要比用iis启动快,可以说进一步提高了开发的效率.要想自己的项目core脱离iis,首先选择vs启动项目的 ...
- 关于ubuntu软件卸载的问题
...... 起因很菜....就是手贱把/usr/lib/下的R的目录给rm -rf掉了, 然后在R的软件包里用./configure也生不成, R RHOME还在, 然而因为lib下的R删掉了所以R ...
- solr 加载 停用/扩展词典
startup.bat 停止词典的效果
- jQuery基础（3）- ajax
一.jQuery的ajax 1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML). 简言之,在不重载整个网页的情况下, ...
- OSX10.12搭建IPv6本地环境测试APP
前记 最近刚换了工作,生活终于又安定下来了,又可以更博了 正文 最近公司在上线APP(整体全是用JS去写的,就用了我原生的一个控制器),然后APP就去上线,就被苹果巴巴给拒了.通过阅读苹果回复的邮件, ...