Слоты VueJS: почему дочерний метод, переданный через слот от родителя, не работает?

Question

У меня простое демо vue codesandbox .

В этой демонстрации я передаю метод дочернему компоненту (определенному в child) через слоты из parent.Однако этот метод не выполняется при нажатии на кнопку, к которой прикреплен этот метод.

Я хочу знать, ПОЧЕМУ дочерние методы при передаче (от родителя) через слоты не работают.Меня больше интересует логика, стоящая за этим.

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

Используйте реквизит , если вы хотите передать данные children .Используйте emit , если вы хотите передать данные parent .

Answer 2

Если вы вызываете метод в родительском элементе, вам также необходимо определить метод в родительском элементе.Это независимо от того, есть слот или нет.

Любые методы, вызываемые в шаблоне, относятся только к экземпляру этого компонента.Это является побочным продуктом отсутствия необходимости ссылаться на this.

. В вашем примере, чтобы предоставить родительскому доступу к myName, используйте scoped slot и передавайте установщик или дочерний экземпляр дородительский слот.Или предоставьте метод щелчка для родительского слота.

Это идет рука об руку с тем, почему события не передаются дочернему элементу.Для получения дополнительной информации см. Излучение события из содержимого слота в родительский .