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 二进制运算技巧解析
Nov 27 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
js实现限定范围拖拽的示例
Oct 26 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php 邮件发送问题解决
2014/03/22 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Pycharm更换python解释器的方法
2018/10/29 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
通过实例学习Python Excel操作
2020/01/06 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
护理个人求职信范文
2014/01/08 职场文书
自主招生自荐信指南
2014/02/04 职场文书
道德模范先进事迹
2014/02/14 职场文书
研究生导师评语
2014/12/31 职场文书
Django实现聊天机器人
2021/05/31 Python
Python实现智慧校园自动评教全新版
2021/06/18 Python