Question

我有一个简单的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并将设置器或子实例传递给插槽父级。或为广告位父级提供click方法。

这与为什么事件没有发送给孩子有关。有关更多信息，请参见Emit event from content in slot to parent。

Answer 2

如果要将数据传递给孩子，请使用道具。如果要将数据传递给父级，请使用发出。

VueJS插槽：为什么从父级通过插槽传递的子方法无效？

2 个答案: