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

Question

我有一个简单的 vue codesandbox demo.

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

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

App.vue

<template>
  <div id="app">
    <img width="25%" 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>

谢谢。

Answer 1

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

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

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

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

Answer 2

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