home > webfront > ECMAS > vue >

详解v-model：v-model双向绑定与Vue自定义组件设置

Author：zhoulujun Date：2019-12-20 Hits：

前端开发使用框架的目的就是 “双向数据”绑定，不在需要jquery去手工驱动之前在《 vue2 x入坑总结—回顾对比angularJS React》，之前总

前端开发使用框架的目的就是 “双向数据”绑定，不在需要jquery去手工驱动

之前在《 vue2.x入坑总结—回顾对比angularJS/React》，之前总关于vue\angluar\react的数据绑定：

react没有双向绑定，数据源状态提升至父组件中，然后通过setState，在进行diff算法更新页面
angularJS，$watch用来检测它监视的 model 里是否有变化的东西（脏检查），一次做完所有数据变更，然后整体应用到界面上
Vue 的依赖追踪是【原理上不支持双向绑定，v-model 只是通过监听 DOM 事件实现的语法糖】

angular与vue的双向绑定值v-model

回顾angular 指令

Angularjs靠自定义指令实现组件化，在做angular1.x项目时候，我们一般

service : 封装$http操作，信息提示，及容错处理。
controller : 调用service暴露的方法从后台获取数据，并赋值给指定变量。
directive : 双向数据绑定controller中的变量以获取驱动表格渲染的数据，将排序，过滤，分页的具体实现封装在指令内部。

之前谈angular自定义指令，scope为directive指定相关联的作用域，数据绑定有@、=、&

@绑定字符串，常用于传递从后台获取的用于驱动纯组件的源数据。
=双向绑定，为自定义指令中传递可配置的常量参数提供设置接口。
&绑定函数，为自定义指令中传递自定义方法提供接口。

这里大致讲一下，就讲了很多，还是回到vue

官方介绍：https://cn.vuejs.org/v2/guide/components-custom-events.html#自定义组件的-v-model

vue 自定义组件 v-model

v-model 指令用来在 <input> 、 <select>、 text、 checkbox、radio 等表单控件元素上创建“双向数据绑定”

指令后还可以添加多个参数（number、lazy、debounce）;

lazy 参数是将双向数据同步的时间节点从 input 触发改为了 change 触发，在默认情况下，v-model 在 input 事件中同步输入框的值与数据
number 参数将使用户输入值被同步到model 中时强制转换为数值类型，如果原值的转换结果为 NaN,则返回原值

自定义组件时，有两个参数prop，event

prop定义那个属性被父组件调用时,v-model能取到的值
emit(触发)change的时候，参数的值就是父组件v-model收到的值。

下面这个例子说明下

<template>
  <div>
    <span>这里显示的是子组件input的value1值</span>
    <input type="text" @input="handleInput" :value="value">
  </div>
</template>

<script>
export default {
  name: 'test',
  // 使用model对象,定义它的两个属性,就可以在父组件通过v-model实现父子组件双向数据绑定
  model: {
    // 定义那个属性 被父组件调用 时,v-model能取到的值
    prop: 'value',
    // emit(触发)change的时候，参数的值就是父组件v-model收到的值。
    event: 'change'
  },
  props: {
    value: String
  },
  methods: {
    handleInput (e) {
      this.$emit('change', e.target.value)
    }
  }
}
</script>

转载本站文章《详解v-model：v-model双向绑定与Vue自定义组件设置》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8237.html

相关热词搜索： Vue v-model 双向绑定

上一篇：vue keep-alive(1)：vue router如何保证页面回退页面不刷新？

下一篇：vue、react中key有何区别？循环渲染优化与Vue.delete删除

angular与vue的双向绑定值v-model

回顾angular 指令

vue 自定义组件 v-model

延伸阅读：