Vue.js Vue在'；透明'；包装输入组件

我正在为

组件编写一个小包装。 我是按照文件和这个

然而，我有双向绑定的问题。 我希望我的组件能够与

v-model

一起使用。绑定似乎可以很好地更新值，但当我更改值本身时，组件不会更新。我也有，这似乎是我的问题

简单的例子：

<template id="numInput" :v-on="listeners">
  <div>
    <!-- note the div here, it works without, but that's not what I want -->
    <input ref:inp type="number" :value="num" @input="updateSelf($event.target.value)" @blur="reset" :class="{rc: isNegative}" />
  </div>
</template>

您可以找到完整的代码示例

绑定是单向工作的（修改文本输入）。但输入组件不会以另一种方式更新（示例中的按钮klick）

---

欢迎任何帮助

这里出现了一些问题，但最基本的是在代码中混合了nom和num。我稍微修改了你的组件，将num数据转换成属性，然后在你的主应用程序中绑定到它

这是您重新编写的代码

Vue.config.devtools = true;

// global component registration
Vue.component('num-input', {
  template: '#numInput', 
  props: ['value'],
  computed: {
    isNegative: function() {
      console.log('num: ' + this.value)
      return this.value < 0;
    },
    listeners: function () {
      return this.$listeners;
    },
  },
  methods: {  
    reset () {
      if (this.isNegative) {
        this.$emit('input', 0)        
      }
    }
  },
});

 new Vue({
   el: '#container',
   data: {
     num: 0,
   },
   methods: {
     increaseBy1() {
       this.num++;
       console.log("increased by 1");
     },
   },
 });

Vue.config.devtools=true；
//全局组件注册
Vue.component（'num-input'{
模板：“#numInput”，
道具：['value']，
计算：{
isNegative:function（）{
console.log（'num:'+this.value）
返回此值。值<0；
},
侦听器：函数（）{
返回此。$listeners；
},
},
方法：{
重置（）{
如果（这个是负数）{
此.$emit（'input'，0）
}
}
},
});
新Vue({
el:'集装箱'，
数据：{
数字：0，
},
方法：{
增加1（）{
这个.num++；
控制台日志（“增加1”）；
},
},
});

为了查看代码和html绑定，我将您的代码笔分叉，可以在

---

自定义输入组件应该是无状态的（除非您有理由不这样做）；这意味着组件的值应该由道具而不是本地状态（数据）提供。您的

组件缺少

值
道具，该道具是
v-model
工作所必需的

另外，您可能希望将该选项设置为false，并手动绑定
$attrs
，因为您已经将输入元素包装在div中

下面是一个小例子，说明应该如何：


Vue.component（'num-input'{
模板：“#numInput”，
继承属性：false，
道具：['value']，
计算：{
isNegative（）{
返回此值。值<0；
},
},
方法：{
输入（e）{
//您可以在验证后有条件地执行此操作
此.$emit（'input'，例如target.value）；
},
onBlur（）{
如果（这个是负数）{
此.$emit（'input'，0）；
}
},
},
});
新Vue({
el:“#应用程序”，
数据：{
数字：0，
},
});
负片{颜色：红色；}

+1
{{num}}

在您的示例中，更改输入不会更改
p
标记。您还必须将这段代码：
@input=“num=$event”
添加到
num input
中。还有一点是错误的：
updateSelf
改变了num属性。你是对的。我太专注于让按钮工作了。让我再看一次并进行编辑。谢谢。更改了代码以修复my@ThomasLombart指出的许多问题。再次感谢，太好了！也谢谢你的解释！