vue 自定义组件使用v-model(组件通信方式1)
父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input’,val)自动修改父组件v-model绑定的值
child:
<template>
<div>
<input type="text" v-model="mymessage" @change="changeValue">
</div>
</template> <script>
export default {
name: "child",
model:{
prop: "mymessage",
event: "change"
},这段代码可以忽略
props:{
value:String //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值
}
}
}
</script>
parent:
<template>
<div>
<p>this is parent compoent!</p>
<p>{{message}}</p>
<child v-model="message"></child>
</div>
</template> <script>
import child from '../components/child'
export default {
name: "parent",
data(){
return {
message:'hello'
}
},
components:{
child
}
}
</script>
以上代码可以写成子组件通过接收props父亲传递的数据,子组件通过$emit发射事件将父组件的input值message更改,代码如下:
child:
<template>
<div>
<input type="text" v-model="mymessage" @change="changeValue">
</div>
</template> <script>
export default {
name: "childOne",
props:{
value:String, //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值
}
}
}
</script>
parents:
<template>
<div>
<p>{{message}}</p>
<childone @input="handleMessage"></childone>//监听子组件发射的事件input,将input的value值更改 </div>
</template> <script>
import childone from '../components/childOne'
export default {
name: "parentOne",
components:{
childone
},
data(){
return {
message:'hello'
}
},
methods:{
handleMessage(val){
this.message = val
}
}
}
</script>
vue 自定义组件使用v-model(组件通信方式1)的更多相关文章
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- vue 自定义封装组件 使用 model 选项
自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同 ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- VUE 自定义组件之间的相互通信
一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
- Vue自定义组件以及组件通信的几种方式
本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...
- Vue - 自定义组件双向绑定
前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表 ...
- vue自定义组件并使用
以下是使用自己写的一个简单的文件上传框为例 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容 其中,action是父组件传递给子组件的参数,使用p ...
- vuex的简单例子和vue model组件
好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...
随机推荐
- caffe实现年龄及性别预测
一.相关代码及训练好的模型 eveningglow/age-and-gender-classification: Age and Gender Classification using Convolu ...
- 【Leecode】两数相加
学习了链表结构,链表中元素的访问,对象指针的初始化与赋值,链表的创建(多个节点链接起来),进位计算的表达. 100ms /** * Definition for singly-linked list. ...
- 作业-haproxy配置文件的增删查(有一个bug不知道咋改)
# yangqiao #查询 ''' f=open("C:\\aaaaaaaaaaaaa\\haproxy.txt", "r", encoding=" ...
- ios开发的frame、物理屏幕尺寸和图片分辨率
型号 屏幕尺寸(inch) 逻辑分辨率(point) 缩放因子(scale factor) 物理分辨率(pixel) 像素密度(PPI) iPhone3GS 3.5 320 * 480 @1x 320 ...
- JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性,这个属性是什么?
原文链接http://www.cnblogs.com/zcjnever/archive/2011/04/21/2023133.html Javascript中的offsetParent属性 支持的浏览 ...
- snmpd 服务安装和配置(转载)
snmp rpm包安装步骤 https://blog.csdn.net/macrothunder/article/details/50394566 rpm包位置: http://rpm.pbone.n ...
- C#开发微信支付之企业向用户付款
1.企业付款的介绍 所谓企业付款指的是,在功能开放后诸如保险行业的客户理赔.退保.商品退款.发放征集活动奖金.抽奖互动等操作都可以通过企业付款完成.而此前,微信支付只能提供客户向企业单向付款. 商户如 ...
- WordPress版微信小程序安装使用说明
昨天在群里,有刚刚使用WordPress版微信小程序朋友,在问安装过程中的问题,这些问题是经常被问到,这至少说明两个问题: 1.我开发的程序安装和使用不够简易,无法通过简单的配置就可以使用,特别是如果 ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- scrpy-cookie
两种方法模拟登陆 1.直接携带cookie import re import scrapy class RenrenSpider(scrapy.Spider): name = 'renren' all ...