vue在自定义组件中使用v-model进行数据绑定

更新日期: 2018-09-22阅读: 2.6k标签: 数据绑定

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event


示例:

先来一个组件,不用vue-model,正常父子通信

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说: {{sthGiveChild}}</p>
  <Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  },
  methods: {
    turnBack(val) {
      this.sthGiveChild = val;
    }
  }
}
</script>
<!-- child -->
<template>
<p class="child">
  <p>我是儿子,父亲对我说: {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。


改用v-model

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说: {{sthGiveChild}}</p>
  <Child v-model="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  }
}
</script>
<!-- child -->
<template>
<p class="child">
  <p>我是儿子,父亲对我说: {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  model: {
   prop: 'give',
    event: 'returnBack'
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>


文案虽有不同,但是效果最终是一致的。

看看官方自定义组件的v-model,官方例子https://vue.docschina.org/

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

尝试把上边子组件的例子改一下,也是跑的通的

<!-- child -->
<template>
<p class="child">
  <p>我是儿子,父亲对我说: {{value}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    returnBackFn() {
      this.$emit('input', '还你200块');
    }
  }
}
</script>


做一下总结:

如果你懒,不想自己去处理事件,那就用默认的 'value' && 'input' 事件去处理,如果用原生事件的,甚至连model属性也可以省去。

如果你想自己的代码比较明确,区分出自定义事件,那么下面的组合才是你的菜。

prop和event看你自己心情定义,当然要知名见意【尽量避开关键字】

model: {
    prop: 'someProp', // 注意,是prop,不带s。我在写这个速记的时候,多写了一个s,调试到怀疑人生
    event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])

链接: https://fly63.com/article/detial/2490

Angular双向数据绑定

双向数据绑定: 所谓双向数据绑定是指View(视图)与Model(模型)之间的绑定:View<=>Model。View的改变: 通过界面交互使视图发生改变,如Input框的输入,Select元素的选择,scrollBar滚动,浏览器窗口大小改变等等。

Nautil 中使用双向数据绑定

虽然是基于 react 的框架,但是在 nautil 中可以使用双向数据绑定,这得益于基于观察者模式的开发思路。在 react 中使用双向绑定并非没有需求,react 严格的单向数据流,严重影响了开发者的发挥空间,特别是在表单组件的使用中

组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)

首先我们先说一下在自定义组件中使用v-model的必要条件,在自定义的组件中要有input(这里我们先不讨论单选复选框),在自定义组件的模板对象中要有props属性,且里面要含有一个value

Vue的双向数据绑定原理

Object属性分为两个类型:数据属性、访问器属性,每类属性又有其不同的特显,双向绑定的原理是根据其访问器属性的特性来实现的。Configurable:是否可以通过delete删除,能否修改他的属性特性,能否修改为访问器属性。默认值true

不要再搞混Vue的响应式原理和双向数据绑定了

之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是 Vue ,所以免不了问到其响应式原理和 Vue 的双向数据绑定。但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!