如何将数据从插槽范围设置到组件

Posted 2023-02-23

【中文标题】如何将数据从插槽范围设置到组件

【英文标题】：How to set data from slot-scope to component

【发布时间】：2019-06-08 14:33:24

【问题描述】：

我是 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>

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

【问题讨论】：

可能有更好的方法来解决这个问题。 someMethod 是做什么的？

类似初始化表单的东西

我不确定这个问题对于插槽是否有意义。这个小提琴能回答你的问题吗？ jsfiddle.net/posva/uzd56xv2

【参考方案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>

【讨论】：

受到启发。谢谢你给了我一个想法。