vue中使用v-model完成组件间的通信


Posted in Javascript onAugust 22, 2019

以上的两种方法,都是实现的单向数组传递,那如何实现两个组件之间的双向传递呢?

即,在父组件中修改了值,子组件会立即更新。

在子组件中修改了值,父组件中立即更新。

vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。

使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model

父组件

<template>
 <div>
 {{fatherText}}
 <Child v-model="fatherText"></Child>//调用子组件,并将 fatherText传递给子组件
 <button @click="changeChild">changeChildButton</button>
 </div>
</template>

<script>
import Child from "./Child.vue";
export default {
 name: "father",
 data() {
 return {
 fatherText: "i'm fathertext"
 };
 },
 components: {
 Child
 },
 methods: {
 changeChild() {
 this.fatherText = "father change the text";
 }
 }
};
</script>

子组件

<template>
 <div>
 <p class="child" @click="change">{{fatherText}}</p>//正常使用fatherText的值,并添加一个修改值 的方法
 </div>
</template>
<script>
export default {
 name: "child",
 model: {//添加了model方法,用于接收v-model传递的参数
 prop: "fatherText", //父组件中变量的传递
 event: "changeChild" //事件传递
 },
 props: {
 fatherText: {//正常使用props接收fatherText的值
 type: String
 }
 },
 data() {
 return {
 
 };
 },
 methods: {
 change(){
  this.fatherText = 'son change the text'
 }
 }
};
</script>

在这里,报了一个错误,这是因为数据流是单向的,但是我们在这里,子组件不应该直接修改props里的值。

vue中使用v-model完成组件间的通信 

这里不能直接修改,所以我们需要迂回着修改,在子组件中定义一个自己的变量,再将props的值赋值到自己的变量,修改自己的变量是可以的。

子组件 - 修改props中的值

<template>
 <div>
 <p class="child" @click="change">{{childText}}</p>
 </div>
</template>
<script>
export default {
 name: "child",
 model: {
 prop: "fatherText", //父组件中变量的传递
 event: "changeChild" //事件传递
 },
 props: {
 fatherText: {
 type: String
 }
 },
 data() {
 return {
 childText: this.fatherText //定义自己的变量childText
 };
 },
 methods: {
 change() {
 this.childText = "son change the test";//修改自己的变量
 }
 }
};

两个组件间更新

完成了上述代码,你会发现两个组件都改变的内容,但是只更新了自身组件的内容,如何使两个组件进行同步更新呢?

这里需要使用我的Wath方法,来进行监听传递组件的变量

<template>
 <div>
 <p class="child" @click="changeChild">{{childText}}</p>
 </div>
</template>
<script>
export default {
 name: "child",
 model: {
 prop: "fatherText", //父组件中变量的传递
 event: "changeChild" //事件传递
 },
 props: {
 fatherText: {
 type: String
 }
 },
 data() {
 return {
 childText: this.fatherText
 };
 },
 methods: {
 changeChild() {
 this.childText = "son change the test";
 }
 },
 watch: {
 fatherText(newtext) {//使用父组件中变量名为函数名,监听fatherText的变化,如果变化,则改变子组件中的值
 this.childText = newtext;
 },
 childText(newtext) {//监听子组件中childText变化,如果变化,则通知父组件,进行更新
 this.$emit("changeChild", newtext);
 }
 }
};

总结

以上所述是小编给大家介绍的vue中使用v-model完成组件间的通信希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
用vue写一个日历
Nov 02 Javascript
layui动态表头的实现代码
Aug 22 #Javascript
深入理解令牌认证机制(token)
Aug 22 #Javascript
聊聊鉴权那些事(推荐)
Aug 22 #Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 #Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 #Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 #Javascript
node实现爬虫的几种简易方式
Aug 22 #Javascript
You might like
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python图书管理系统
2020/04/05 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
《跨越百年的美丽》教学反思
2014/02/11 职场文书
新品发布会策划方案
2014/06/08 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
交通工程专业推荐信
2014/09/06 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
借款民事起诉状范文
2015/05/19 职场文书
党支部综合考察意见
2015/06/01 职场文书
运动员加油词
2015/07/18 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL