vue.js - VueJS 插槽 : Why child method passed in via slot from parent doesn't work?

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 的访问权限，请使用作用域插槽并将 setter 或子实例传递给插槽父级。或者为插槽父级提供点击方法。

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