VueJS 插槽：为啥通过父插槽传入的子方法不起作用？

Posted 2023-02-23

【中文标题】VueJS 插槽：为啥通过父插槽传入的子方法不起作用？

【英文标题】：VueJS slots: Why child method passed in via slot from parent doesn't work?VueJS 插槽：为什么通过父插槽传入的子方法不起作用？

【发布时间】：2019-07-17 21:14:47

【问题描述】：

我有一个简单的 vue codesandbox demo.

在这个演示中，我通过父组件的槽将方法传递给子组件（在子组件中定义）。但是，当单击附加此方法的按钮时，该方法不会执行。

我想知道为什么通过插槽（从父级）传递子方法不起作用。我对这背后的逻辑更感兴趣。

App.vue

<template>
  <div id="app">
    <img  src="./assets/logo.png" />
    <user>
      <button @click="changeName('Don')">Change Name</button>
    </user>
  </div>
</template>

<script>
import user from "./components/user";

export default 
  name: "App",
  components: 
    user
  ,
  data: function() 
    return 
      msg: "Name is Bond.. James Bond"
    ;
  
;
</script>

User.vue

<template>
  <div class="wrapper">
    <h2>My name is "myName"</h2>
    <slot></slot>
  </div>
</template>

<script>
export default 

  data()  
    return 
      myName: 'Bond'
    
  ,

  methods: 
    changeName: function(newName)
      this.myName = newName
    
  
;
</script>

谢谢。

【参考方案1】：

如果调用父级中的方法，还需要定义父级中的方法。这与插槽与否无关。

模板中调用的任何方法都只引用该组件的实例。这是不需要引用 this 的副产品。

在您的示例中，要让父级访问 myName，请使用 scoped slot 并将设置器或子实例传递给插槽父级。或者向插槽父级提供点击方法。

这与为什么不向子级发送事件密切相关。请参阅Emit event from content in slot to parent 了解更多信息。

【参考方案2】：

如果您想将数据传递给 children，请使用 props。如果您想将数据传递给 parent，请使用 emit。

【讨论】：

您能否详细说明您的答案，请参阅如何回答问题***.com/help/how-to-answer