父组件通过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)的更多相关文章

  1. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  2. vue 自定义封装组件 使用 model 选项

    自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同 ...

  3. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  4. VUE 自定义组件之间的相互通信

    一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...

  5. vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  6. vue自定义组件中的v-model简单解释

    在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...

  7. Vue自定义组件以及组件通信的几种方式

    本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...

  8. Vue - 自定义组件双向绑定

    前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表 ...

  9. vue自定义组件并使用

    以下是使用自己写的一个简单的文件上传框为例 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容 其中,action是父组件传递给子组件的参数,使用p ...

  10. vuex的简单例子和vue model组件

    好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...

随机推荐

  1. Linux基础入门-用户及文件权限管理

    一.Linux用户管理: 不同的用户的文件都是放在同一个物理磁盘上的甚至同一个逻辑分区或者目录里,但是由于Linux的用户管理和权限机制,不同用户不能轻易查看.修改彼此的文件. 1. 查看用户: wh ...

  2. HLS自习(1)

    HLS自习(1) 处理器的处理方式:

  3. USD在CentOS7.0操作系统下的安装方法

    最近Pixar的开源USD软件很火,官方在Introduce中明确讲到这个软件的设计开发目标是增强艺术家协作,减少不确定因素,最大化资产版本迭代效率,追求更大的承载能力. 当今行业中传统的线性的制作方 ...

  4. 你云我云•兄弟夜谈会 第三季 企业IT架构

    你云我云•兄弟夜谈会 第三季 企业IT架构 你云我云•兄弟夜谈会 第二季 5G 你云我云•兄弟夜谈会 第一季 企业云 0. 概况 时间:2019年2月23日 22:00~23:30 主题:企业IT架构 ...

  5. 20175311 《Java程序设计》第三周学习总结

    20175311 2018-2019-2 <Java程序设计>第3周学习总结 教材学习内容总结 在蓝墨云中的教程里学习了如何安装IDEA,并且尝试了自己破解IDEA 主要在看书时,对jav ...

  6. [UE4]在Character中使用Add Spline Mesh Component,关于Transform.Mobility

    一.因为Character是可移动的,因此也需要把Add Spline Mesh Component的Transform.Mobility设置为Movable 二.不然就会得到类似这样的提示.错误信息 ...

  7. SSM框架-MyBatis框架数据库的增删查改操作

    话不多说,在User.xml文件中主要写一下操作数据库的sql语句,增,删,查,改是最常见的数据库操作 User.xml文件下:

  8. Centos 7.5下搭建SVN源代码服务器

    1.先查看是否存在svn,没有就需要安装svn svnserve --version #查看svn版本号 which svn #查看svn程序所在目录 yum install subversion - ...

  9. Python对wav文件的重采样

    例如从2channel,4.41k hz 重采样到 1 channel,16k hz def downsampleWav(src, dst, inrate=44100, outrate=16000, ...

  10. 架构师技能图谱 V1.2

    系统架构能力 基本理论 扩展性设计 可用性设计 可靠性设计 一致性设计 负载均衡设计 过载保护设计 灾难恢复和备份 协议设计 二进制协议 文本协议 接入层架构设计 DNS 轮询 动静态分离 静态化 反 ...