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 相关文章推荐
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
js图片自动切换效果处理代码
May 07 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
致100米运动员广播稿
2014/02/14 职场文书
保险公司早会主持词
2014/03/22 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
毕业论文致谢信
2015/05/14 职场文书
文化大革命观后感
2015/06/17 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫