• home > webfront > ECMAS > vue >

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

    Author:zhoulujun Date:

    前端开发使用框架的目的就是 “双向数据”绑定,不在需要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

    延伸阅读: