vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法


Posted in Javascript onNovember 27, 2017

上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下。接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法,具体详情如下所示:

父子组件通信,都是单项的,很多时候需要双向通信。方法如下:

1、父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx')

2、父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身。

3、父组件使用: v-model

第一种曾经被废除过,由于维护成本的原因被删掉,但经过证实,确实有存在的意义,又被加上。

  第一种:

父组件: 

<template>
 <div>
  <aa class="abc" :snycTest.sync="test" ></aa>
   {{'外面的值:' + test}}
  <button @click="fn">
   外面改变里面
  </button>  
 </div>
</template>
<script>
import aa from './test.vue'
 export default {
  data () {
   return {
    test: ''
   }
  },
  methods: {
   fn () {
    this.test += 1
   }
  },
  components:{
   aa
  }
 }
</script>

子组件:

<template>
 <div>
  <ul>
   <li>{{'里面的值:'+ snycTest}}</li>
   <button @click="fn2">里面改变外面</button>
  </ul>
 </div>
</template>
<script>
 export default {
  props: {
   snycTest: ''
  },
  methods: {
   fn2 () {
    this.$emit('update:snycTest', this.snycTest+1) //这儿是关键 update:snycTest 自定义事件会告诉父组件将父组件的 test值改为this.snycTest+1,并传回给子组件。
} } } </script>

v-model写法一:

父组件:

<template>
 <div>
  <aa class="abc" v-model="test" ></aa> // 组件中使用v-model
   {{'外面的值:' + test}} // 这儿试验test与内部msg值为双向绑定关系
  <button @click="fn">
   外面改变里面
  </button>
  
 </div>
</template>
<script>
import aa from './test.vue'
 export default {
  data () {
   return {
    test: ''
   }
  },
  methods: {
   fn () {
    this.test += 1 
   }
  },
  components:{
   aa
  }
 }
</script>

子组件写法一:

<template>
 <div>
  <ul>
   <li>{{'里面的值:'+ msg}}</li>
   <button @click="fn2">里面改变外面</button>
  </ul>
 </div>
</template>
<script>
 export default {
  model: {  // 使用model, 这儿2个属性,prop属性说,我要将msg作为该组件被使用时(此处为aa组件被父组件调用)v-model能取到的值,event说,我emit ‘cc' 的时候,参数的值就是父组件v-model收到的值。
   prop: 'msg',
   event: 'cc'
  },
  props: {
   msg: ''
  },
  methods: {
   fn2 () {
    this.$emit('cc', this.msg+2)
   }
  }
 }
</script>

v-model写法二

父组件 <aa class="abc" v-model='test' ></aa>

子组件

<template>
 <div>
  <ul>
   <li>{{'里面的值:'+ value}}</li> // 组件使用时有v-model属性,value初始传的‘what' 不会被渲染,而是v-model绑定的test值被渲染,这儿value会被重新赋值为v-model绑定的test的值。
   <button @click="fn2">里面改变外面</button>
  </ul>
 </div>
</template>
<script>
 export default {
  props: {
   value: { // 必须要使用value

 default: '',


},
  },
  methods: {
   fn2 () {
    this.$emit('input', this.value+2) // 这儿必须用input 发送数据,发送的数据会被父级v-model=“test”接受到,再被value=test传回来。
   }
  }
 }

一般双向绑定用v-model写法一。

总结

以上所述是小编给大家介绍的vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
详解CocosCreator消息分发机制
Apr 16 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 #Javascript
在vue中实现简单页面逆传值的方法
Nov 27 #Javascript
浅析Vue自定义组件的v-model
Nov 26 #Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 #Javascript
Javacript中自定义的map.js  的方法
Nov 26 #Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 #Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 #Javascript
You might like
COM in PHP (winows only)
2006/10/09 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python多进程编程常用方法解析
2020/03/26 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
会务接待方案
2014/02/27 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers