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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
php程序内部post数据的方法
2015/03/31 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
jQuery 使用个人心得
2009/02/26 Javascript
JQuery live函数
2010/12/24 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
10个经典的网页鼠标特效代码
2018/01/09 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python File readlines() 使用方法
2018/03/19 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python中的错误如何查看
2020/07/08 Python
Python 内存管理机制全面分析
2021/01/16 Python
师范生教师实习自我鉴定
2013/09/27 职场文书
开会迟到检讨书
2014/01/08 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
安全生产月宣传标语
2014/10/06 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
单位计划生育责任书
2015/05/09 职场文书
护士工作心得体会
2016/01/25 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers