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

 更新时间:2017年11月27日 08:48:33   作者:吃个石头   我要评论
父子组件通信,都是单项的,很多时候需要双向通信。这篇文章主要介绍了vue 自定义组件 v-model双向绑定、 父子组件同步通信,需要的朋友可以参考下

上篇文章给大家介绍了浅析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双向绑定、 父子组件同步通信的多种写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue实现重置表单信息为空的方法

    vue实现重置表单信息为空的方法

    今天小编就为大家分享一篇vue实现重置表单信息为空的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue.js使用3DES加密的方法示例

    vue.js使用3DES加密的方法示例

    这篇文章主要介绍了vue.js使用3DES加密的方法,结合实例形式分析了vue.js使用3DES加密的具体操作步骤与使用技巧,并提供了CryptoJS-v3.1.2的本地下载,需要的朋友可以参考下
    2018-05-05
  • vue实现倒计时获取验证码效果

    vue实现倒计时获取验证码效果

    这篇文章主要为大家详细介绍了vue实现倒计时获取验证码效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue中选项卡点击切换且能滑动切换功能的实现代码

    vue中选项卡点击切换且能滑动切换功能的实现代码

    本文通过实例代码给大家介绍了vue中选项卡点击切换且能滑动切换功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下
    2018-11-11
  • vue使用监听实现全选反选功能

    vue使用监听实现全选反选功能

    最近做的项目用到了全选全不选功能,于是我就自己动手写了一个,基于vue使用监听实现全选反选功能,具体实例代码大家参考下本文
    2018-07-07
  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    这篇文章主要介绍了vue在项目中使用百度地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue header组件开发详解

    Vue header组件开发详解

    本篇文章主要介绍了Vue header组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 浅析vue数据绑定

    浅析vue数据绑定

    本文主要介绍了vue数据绑定的相关知识,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • vue使用rem实现 移动端屏幕适配

    vue使用rem实现 移动端屏幕适配

    这篇文章主要介绍了vue使用rem实现 移动端屏幕适配的相关知识,通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下
    2018-09-09
  • Vue 中mixin 的用法详解

    Vue 中mixin 的用法详解

    e中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。这篇文章主要介绍了Vue mixin 的用法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04

最新评论