父组件通过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. python 数字以及字符串(方法总结,有的可能理解错误)

    数字类型(int): 在python 2中,数字类型可以分为整形,长整形,浮点型,以及复数.在python3中都是整形和长整形都称之为整形,且python3中没有限制. 1.int方法使用,用于转换字 ...

  2. [ZZ] 用matlab绘制箭头

    用matlab绘制箭头 http://npfeng900.blog.163.com/blog/static/14456108201221922944998/ 用matlab绘制箭头1 用matlab绘 ...

  3. mac mongodb安装

    1.前往官网下载.tgz文件 2.解压 tar zxf mongo压缩文件 3.配置环境变量:MAVEN_HOME & bin路径 4.创建data & log文件夹 5.执行安装命令 ...

  4. Android USB ADB ATUH 验证包验证流程

    #define ADB_AUTH_TOKEN 1 #define ADB_AUTH_SIGNATURE 2 #define ADB_AUTH_RSAPUBLICKEY 3   1. 连接USB,手机发 ...

  5. 廖雪峰Java9正则表达式-1正则表达式入门-2正则表达式匹配规则

    正则表达式的匹配规则: 从左到右按规则匹配 匹配规则及示例 可以匹配 不能匹配 "abc" "abc" 不能匹配:"ab", "A ...

  6. 激活WINDOWS SERVER 2019

    Windows Server 2019 Datacenter WMDGN-G9PQG-XVVXX-R3X43-63DFGWindows Server 2019 Standard N69G4-B89J2 ...

  7. Apartment 2019:(1)创建墙体

    墙体建模 The Walls 软件:SketchUp Pro 2017 墙体模型 建模过程: 一.导入图像并调整大小 导入公寓平面参考图/户型图(来自网络),导入为图像.连续三击鼠标左键,选中所有的几 ...

  8. 无外接键盘安装 raspberry pi 3B+ 安装系统

    从官网介绍看,当前raspbian和以前大家的记录略有不同,老的博客资料基本都是介绍下载raspbian,但现在raspbian已经不再维护镜像, raspbian系统开始由官方 pi foundat ...

  9. hive动态分区问题--分区为中文

    报错如下: Loading data to table data_da.tmp_wlw_test partition (stat_date=2017-05-11, business_type_name ...

  10. Bootstrap treeview增加或者删除节点

    参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...