Question

我想将一个函数传递给Ractive模板，并希望在组件中有一些操作时触发它。这样做的最佳方式是什么？

Answer 1

有几种方法可以做到这一点。

您可以提供方法

＆＃13;

const Component = Ractive.extend({
  template: `
    <button type="button" on-click="@this.myMethod()">Click Me</button>
  `,
  myMethod: function() {
    console.log('Hello World!');
  }
});

new Component({
  el: 'body'
});

＆＃13;

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

＆＃13;

或在其中一个生命周期事件中附加事件侦听器

＆＃13;

const Component = Ractive.extend({
  template: `
    <button type="button" on-click="someevent">Click Me</button>
  `,
  oninit: function() {
    this.on('someevent', function() {
      console.log('Hello World!');
    });
  }
});

new Component({
  el: 'body'
});

＆＃13;

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

＆＃13;

Ractive还支持数据功能（字面上的数据功能）

＆＃13;

const Component = Ractive.extend({
  template: `
    <button type="button" on-click="this.myDataFunction()">Click Me</button>
  `,
  data: {
    myDataFunction: function(){
      console.log('Hello World!');
    }
  }
});

new Component({
  el: 'body'
});

＆＃13;

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

＆＃13;

如果您希望子组件事件调用父组件上的函数，只需在子组件上触发事件即可。您可以通过分配事件名称或手动使用ractive.fire来执行此操作（如果要传递参数，则非常有用）。然后在父模板上分配事件处理程序或方法。

＆＃13;

const Child = Ractive.extend({
  template: `
    <button type="button" on-click="customclick" on-mouseover="@this.fire('custommouseover', 'Hello', 'World')">Click Me</button>
  `
});

const Parent = Ractive.extend({
  components: { Child },
  template: `
    <Child on-customclick="@this.myMethod()" on-custommouseover="mouseovered" />
  `,
  myMethod: function(){
    console.log('clicked');
  },
  oninit: function() {
    this.on('mouseovered', function(foo, bar) {
      console.log('mouseovered', foo, bar);
    });
  }
});

new Parent({
  el: 'body'
});

＆＃13;

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

＆＃13;

您可以根据需要混合使用事件，方法调用和数据函数。您可以让按钮调用一个方法，该方法又调用ractive.fire，拥有一个调用ractive.fire的事件处理程序，指定一个父节点接收的事件名称，直接从该调用ractive.fire调用您甚至可以将父函数作为数据传入，并将其称为子项上的数据函数。选择适合你的任何东西。

如何将功能传递给Ractive组件？

1 个答案: