Question

我有这个基本设置

    private void animate() {
    new AsyncTask<Void, Void, Void>() {
        @Override
        protected Void doInBackground(Void... params) {
            try {
                Thread.sleep(1000);
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        iv.setImageResource(pics[0]);
                    }
                });
            } catch (Exception ex) {
                ex.printStackTrace();
            }
            while (true) {
                try {
                    Thread.sleep(500);
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            iv.setImageResource(pics[pos]);
                            pos = (pos + 1);
                        }
                    });
                } catch (Exception ex) {
                    ex.printStackTrace();
                }
            }
        }
    }.execute();
}

在<div v-for="n in 4"> <some-component @on-some-event="onSomeEvent(n)"></some-component> </div>内调度on-some-event。但我需要知道哪些组件发送了消息。使用上面的设置，只有some-component传递给方法。并且事件发送的数据无处可用。

我想插入函数，使方法看起来像这样

但是onSomeEvent(n){ return (obj)=>{ console.log(`component ${n} sent ${obj}`); }; }与onSomeEvent一起打包时会发出警告：{{}}

我可以将attribute interpolation is not allowed in Vue.js directives and special attributes.索引传递给组件，但这看起来不太优雅，因为我可能无法修改n

我对Vue有点新手，所以也许我错过了这类东西的一些核心功能？

Answer 1

<div v-for="n in 4">
  <some-component @on-some-event="onSomeEvent | pass n"></some-component>
</div>

....
filters: {
   pass(handler, n) {
       return function() {
           handler()(n, ...arguments)
       }
   }
},
methods: {
   onSomeEvent() {
       console.log(...arguments)  
   }
}

https://jsfiddle.net/2s6hqcy5/2/

Answer 2

你没有错过任何东西，消息是正确的，在Vue中，你将无法使用这样的插值。 http://vuejs.org/guide/syntax.html#Interpolations

但是，您可能希望更改管理事件和在组件之间传递数据的方式。在您的示例中，您可以像这样绑定数据：

<div v-for="n in 4">
    <some-component :n="n"></some-component>
</div>

在你的组件中，声明道具：

Vue.component('some-component', {
  props: ['n'],
  ...

现在，在每个组件中，您可以像其他任何属性http://vuejs.org/guide/components.html#Props一样使用n。

然后在调度你的事件时，你可以像这样调用它，而不需要一个参数：

onSomeEvent()

在活动本身，您可以访问n：

console.log('Component' + this.n + ...)

https://jsfiddle.net/crabbly/mjnjy1jt/

v-for中的闭包，属性插值

2 个答案: