zoukankan      html  css  js  c++  java
  • 关于vue中的语法糖v-model

    开发src-在线系统的过程中,封装了很多组件,如Dialog prompt等,在开源项目的组件中这些组件使用v-model来控制显示,我来总结一下关于自己学习到的v-model知识

    1. 使用props来控制关闭组件,emit同步变量-----props可以进行父组件到子组件的通信,我的思路把子组件控制v-if 的变量通过watch props的值来控制子组件的显示,这样父组件的值改变,子组件watch到改变,子组件关闭;同时我们可以单独关闭子组件,但是需要父组件的变量保持一致,可以在关闭组件的回调中,emit一个新的event来通知父组件,子组件关闭,父组件变量改变为false状态

    // 父组件大致写法
    <Dialog :show="show" @on-cancel="changeShow"> data() { show: true, }, methods: { changeShow(val) { this.show = val } }

     2. v-model语法糖  v-model其实是一种简写方式,我们常见的有两种v-model,分别是input元素上的v-model 和非input元素上

     <input v-model="price"><!-- 下行注释的语法糖 -->
     <!-- <input :value="price" @input="price = $event.target.value"> --> // $event.target.value 就是把input的值赋值给 price

    data(){
    return {
      price: 20
      }
    }

    对于非input元素呢,这里使用官方的例子

    Vue.component('base-checkbox', {
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: Boolean
      },
      template: `
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
      `
    })

    父组件

    <base-checkbox v-model="lovingVue"></base-checkbox>

    这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的属性将会被更新。

    这里的change 可以是 input(input元素) click(dialog) 等等事件,具体要看是如何出发元素的状态改变, 注意.self 防止其他因素影响

    有了这颗糖,封装组件的时候事半功倍

  • 相关阅读:
    vs c++配置opencv(1)
    vs2013搭建团队版本控制 TFS、SVN
    robomongo
    Node log4js
    node.async.auto
    p2.js物理引擎学习
    pomelo
    Node.mongoose
    Node.Buffer
    Node安装及搭建简单HTTP服务器
  • 原文地址:https://www.cnblogs.com/czy960731/p/10196634.html
Copyright © 2011-2022 走看看