zoukankan      html  css  js  c++  java
  • vue 自定义组件使用v-model

    在自定义组件上使用v-model指定:

    Vue.component('my-button',{
    
      template:'<button @click="handleClick"></button>',
    
      data:{
    
        return {
    
          counter:0
        }
      },
    
      methods:{
    
       handleClick:function(){
    
          this.counter++:
          this.$emit('input',this.counter);
        } 
    
      }
    
    });
    
    new Vue({
    
      el:'#app',
    
      data:{
    
        total:0
      }
    
      
    
    });
    <div id="app">
    
      <p>一共是{{totle}}</p>
    
      <my-button v-model="total"></my-button>
    </div>

      使用自定义事件的表单输入组件

    自定义事件也可以用来创建自定义的表单输入组件,使用v-model实现双向数据绑定

    <input v-model="msg"/> 只是

    <input :value="msg" @input="msg=$event.target.msg"/>的一个语法糖

    所以要让组件的 v-model 生效,它必须:

    1 接受一个value属性

    2 value值改变时,触发input事件

  • 相关阅读:
    EXISTS 的使用
    bind()和 unbind()绑定解绑事件的使用
    前端代码
    LIKE CONCAT 连用
    客服工作台
    杂录
    vue
    咋乱杂乱的一些总结
    kotlin 很杂很杂
    group by 和 order by 的区别 + 理解过程
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/10401354.html
Copyright © 2011-2022 走看看