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 注:全局或局部注册的组件称为子组件,其中声明的 ...
随机推荐
- Mac 下netstat和linux下不一样
Linux's netstat command options and OS X(/BSD)'s have almost nothing to do with each other. Of the o ...
- Hdu1796 How many integers can you find 2017-06-27 15:54 25人阅读 评论(0) 收藏
How many integers can you find Time Limit : 12000/5000ms (Java/Other) Memory Limit : 65536/32768K ...
- Java中sleep()与wait()区别（涉及类锁相关概念）
在区别之前,我们首先先了解一下关于对象锁,类锁的相关概念(当时查阅的详细地址:http://www.importnew.com/20444.html,该作者对类锁和对象锁进行了详细的举例分析) 对象锁 ...
- Ubuntu12.04 root用户登录设置
ubuntu12.04默认是不允许root登录的,在登录窗口只能看到普通用户和访客登录.以普通身份登录Ubuntu后我们需要做一些修改. 1.普通用户登录后,修改系统配置文件需要切换到超级用户模式,在 ...
- [mysql]当mysql查询语句查询的结果为空时，返回query结果是什么类型的呢？
php > $con = mysql_connect('localhost' , 'hnb' , 'alyHnb2015'); php > print_r($con);Resource i ...
- （25）uniGUI for C++ builder之UniHTMLMemo初使用及uniGUI如何调用javaScript
(25)uniGUI for C++ builder之UniHTMLMemo初使用及uniGUI如何调用javaScript 2018年09月29日 22:58:20 中国银行之路在脚下 阅读数:11 ...
- Android-Java-面向对象与面向过程的简单理解
支持面向过程的语言有:C Basic 等语言: 支持面向对象的语言有:C++ Java C# 等语言: 面向过程:操作的是行为/功能: 面向对象:操作的是对象,而对象里面有功能行为,所以可以指定 ...
- artificial neural network in spark MLLib
神经网络模型 每个node包含两种操作:线性变换(仿射变换)和激发函数(activation function). 其中仿射变换是通用的,而激发函数可以很多种,如下图. MLLib中实现ANN 使用两 ...
- 【C#】转一篇MSDN杂志文：ASP.NET Pipeline: Use Threads and Build Asynchronous Handlers in Your Server-Side Web Code
序:这是一篇发表在2003年6月刊的MSDN Magazine的文章,现在已经不能在线阅读,只提供chm下载.讲的是异步请求处理那些事,正是我上一篇博文涉及的东西(BTW,事实上这篇杂志阐述了那么搞然 ...
- [面试题目]IT面试中的一些基础问题
1. 面向对象的特征 继承,封装,多态 2. 重写和重载的区别 重写:在继承当中,子类重写父类的函数,函数声明完全一样,只是函数里面的操作不一样,这样叫做重写. 重载:与多态无关,即两个函数名一样的成 ...