问答

vue组件 - 函数属性值的传递问题

作者:admin 2021-05-11 我要评论

测试地址: https://codesandbox.io/s/js-p... 给自定义组件的 onChange 属性传递函数, form-input type="text" label="标签" :value="inputVal" :onChange="on...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

测试地址:https://codesandbox.io/s/js-p...

给自定义组件的 onChange 属性传递函数,

  <form-input 
    type="text"
    label="标签"
    :value="inputVal"
    :onChange="onChange"
  />

函数定义在 methods 域,

new Vue({
  el: '#container',
  data() {
    return {
      inputVal: 'haha'
    }
  },
  methods: {
    onChange(p) {
      console.log('jafas')
    }
  }
});

可是事件触发时却报函数需要名字的错误,实在想不明白为什么。
image

自定义组件如下:

Vue.component('form-input', {
  props: {
    label: String,
    value: String,
    onChange: {
      type: Function,
      default: () => {}
    },
    placeholder: String,
    type: {
      type: String,
      default: 'text'
    },
  },
  template: `
      <div class="bzq_input">
        <label :for="label" class="form-label">{{label}}</label>
        <input :type="type" class="form-control" :id="label" :placeholder="placeholder"
        :value="value"
        @change="onChange"
        >
      </div>
    `
});
###

on-change
在html中需要用短横线形式

###

html不区分大小写,你把form组件里的onChange改成onchange也可以

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue组件 - 函数属性值的传递问题

    vue组件 - 函数属性值的传递问题

  • PHP对象复制奇怪问题

    PHP对象复制奇怪问题

  • phpstorm2020.3,TP6dModel重写主键报

    phpstorm2020.3,TP6dModel重写主键报

  • vue 定义组件的时候怎么把style样式也

    vue 定义组件的时候怎么把style样式也

腾讯云代理商
海外云服务器