如何将数据从插槽作用域设置到组件

Question

我是Vuejs的新人，我对slot-scope有些问题，

<template>
  <some-component>
    <div slot-scope="{someMethod, someData}">
      // the problem is i need someMethod in my current component, not in template
    </div>
  </some-component>
</template>


<script>
export default {
 created() {
   // i need to access someMethod and someData here
   this.someMethod();
 }
}
</script>

有可能吗？最佳实践方法是什么？

Answer 1

您可以将组件的方法发送到插槽主机，然后在返回的插槽范围中提供该方法。

<host :someMethod='someMethod'>
  <div slot='foo' slot-scope='{someMethod}'>{{someMethod()}}</div>
  </div>
</host>

或者将整个组件发送到插槽主机，然后让主机将其发回。

<host :me='me'>
  <div slot='foo' slot-scope='{me}'>{{me.someMethod()}}</div>
  </div>
</host>

<script>
computed:{
  me(){ return this;
  }
}
</script>