1

是否可以在父组件中定义的条件下触发事件？

我有一个输入组件，我想在其中捕获输入.. 有时，但大多数时候我不希望事件触发 

   //App.html
   <Input on:inputData="doStuff(event)" fireEvent=true />    

   //Input.html
   <input bind:value=value (fireEvent ? on:keyup='fire("inputData", { value })' : false )/>

当前发生的事情是fireEvent被忽略并on:keyup总是触发

更新
我将keyup更改为一个函数调用，我在触发事件之前检查了参数，它可以工作，但有点古怪

//App.html
<Input on:inputData='doStuff(event.value)' fireEvent={true} />
 ...
  methods: {
  doStuff(text) {
    console.log('here is the stuff', text);
  }

//Input.html
<input bind:value=value on:keyup='setData({ value })'/>
...
methods: {
  setData(text) {
    if(this.get().fireEvent) {
      this.fire("inputData", text)
    }
  }
}

有人对这个问题有更漂亮的解决方案吗？

4

3 回答 3

3

我不知道为什么我没有想到这一点，但这正是onupdate为了

//App.html
<Input on:inputData='doStuff(event.value)' fireEvent={true} />
     ...
methods: {
 doStuff(text) {
   console.log('here is the stuff', text);
 }

//Input.html
<input bind:value=value />
...
onupdate({ changed, current, previous }) {
  if(this.get().fireEvent) {
    this.fire("inputData", current)
  }
于 2019-02-01T14:16:49.923 回答
2

聚会很晚，但我遇到了类似的问题，最终通过行动解决了它。对于我来说，只有在某个条件成立时，我才需要将点击监听器附加到按钮上。一个更通用的例子可能是：

<button use:conditionalEvent({condition: foo, event: 'click', callback: bar})>...</button>

...

function conditionalEvent(node, {condition, event, callback}) {
    if (condition) {
        node.addEventListener(event, callback);
    }

    return {
        destroy() {
            node.removeEventListener(event, callback)
        } 
    }
}

如果仅针对单个回调或事件类型，标记可能不那么冗长，但您明白了。如果条件可以随着用户输入而改变，你也可以返回一个更新函数：

function changingCondition(node, {condition, event, callback}) {
    function update(condition) {
        if (condition) {
            node.addEventListener(event, callback);
        } else {
            node.removeEventListener(event, callback);
        }
    }

    update(condition);

    return {
        update,
        destroy() {
            node.removeEventListener(event, callback)
        } 
    }
}

并且更新将在condition更改时运行。

于 2021-01-20T19:50:52.863 回答
0

我尝试了以下方法，它奏效了。注意小写的“fireevent”。大写字母把它扔掉了。自然，您必须将其更改为 on:inputData 等。

	methods: {
	    test(evt) {
		console.log('evt.fireEvent', evt.target.getAttributeNode("fireEvent").value);
		if (evt.target.getAttributeNode("fireevent").value && evt.target.getAttributeNode("fireevent").value=="true")
		    console.log('do the happy dance');
		else
		    console.log('do NOTHING');

	    }
	}
<button on:click="test(event)" fireevent="false">Test</button>

于 2019-01-31T17:43:13.640 回答