vue.js学习笔记(六)--利用v-model实现父子组件间的双向通信

原创 2017年08月05日 15:47:03

博客:https://fisher-zh.github.io/

在Vue中,我们可以使用prop属性来进行父子组件间的通信,在之前的文章Vue踩坑之路–父子组件通信总结中有介绍过。

但是prop 是单向绑定的,我们无法在组件中直接修改prop传递的属性。

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。官方文档解释

当然我们可以通过emit在子组件中触发某些事件从而在父组件中修改该数据,这种方法肯定不是最理想的。

在Vue中,能够进行数据双向绑定的属性,我们应该最先想到的是v-model,绑定input的value值,当我们修改value值的同时能够改变数据。那么我们能不能利用v-model这一特点来实现父子组件间某些数据的双向绑定呢?
当然能! 要不我写这个干什么(逃…)

<div>
  <child v-model="message"></child>
  <!-- 通过v-model将message绑定在child上 -->
</div>
// 子组件
export default {
  name: '',
  props: {
    // 通过value获取绑定message值
    value: {
      type: String,
      default: ''
    }
  },
  data: {
    // 你的数据
  },
  methods: {
    changeMessage() {
      // 通过触发组件的input事件改变message的值,
      // 此时父组件中的message值就改变为你设置的值了
      this.$emit('input', 'your message value')
    }
  }
})
版权声明:本文为博主原创文章,转载请注明出处。

Vue.js的组件(四)父组件与子组件的数据联系 之 双向绑定

之前有说到,父组件传数据到子组件是通过组件的属性props来实现的,这是一种单向绑定。父可以影响子,子不能影响父。 但是子可以通过自定义事件来让自己的数据影响到父。 只要把这两种方法结合起来,就可...
  • oak160
  • oak160
  • 2017年03月22日 18:42
  • 4292

浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件

vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定. 我们如何利用 v-model实现自定义的表单组件呢?...
  • yangbingbinga
  • yangbingbinga
  • 2017年03月13日 11:00
  • 15771

vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: //这里必须要用 - 代替驼峰 data(){ return { msg:...
  • mr_fzz
  • mr_fzz
  • 2017年01月20日 23:46
  • 50727

vue2.x自定义组件上使用v-model指令

我们都知道v-model是双向数据绑定经常用到的指令,今天学习到在组件上使用v-model指令,感觉还挺不错的,分享一下 总数{{total}} Vue.component('my...
  • flting1017
  • flting1017
  • 2017年12月13日 14:47
  • 169

利用Vue v-model实现一个自定义的表单组件

上一篇文章  vue v-model实现原理和组件设计 ,我们讲到了,v-model的基本实现原理,这次我们来利用 v-model来实现一个简单的 表单组件 功能描述: 通过点击按钮,可以增减购物数量...
  • yangbingbinga
  • yangbingbinga
  • 2017年03月13日 12:03
  • 6313

Vue2.x父组件与子组件之间的双向绑定

最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex,...
  • Mocha_Wang
  • Mocha_Wang
  • 2017年07月28日 10:39
  • 1911

总结vue父子组件之间的通信

一 环境搭建 步骤 1 打开git,运行npm  install --global vue-cli 这是安装vue的命令行         2 vue init webpack vue-demo ...
  • Johnny0991
  • Johnny0991
  • 2017年11月15日 11:03
  • 1435

vue-子组件向父组件传值

子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 Do you like me? {{childWords}} methods: { ...
  • yu88288356
  • yu88288356
  • 2017年02月06日 17:22
  • 24859

vue遇到过的坑(父组件向输入框组件传值进去,然后子组件利用传进来的数据进行数据绑定的问题与解决方法)

vue.js一大特性是可以实现很多可复用的组件。 我做项目的时候,封装了一个输入框组件,然后页面上所有相同样式的地方都用这个组件来进行调用,刚开始以为实现起来很简单,作为一个vue刚刚学习的人来说,...
  • limy_cxm
  • limy_cxm
  • 2017年06月20日 16:41
  • 2491

【vue.js】子组件的参数值不随着父组件值的改变而改变

子组件 props['myDetail'] 父组件computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 然而当sto...
  • u012837829
  • u012837829
  • 2017年04月06日 16:26
  • 1450
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vue.js学习笔记(六)--利用v-model实现父子组件间的双向通信
举报原因:
原因补充:

(最多只允许输入30个字)