Vue.js VueJS插槽：为什么从父对象通过插槽传入的子方法不'；不行？

我有一个简单的vue

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

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

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>

<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>

改名
从“/components/user”导入用户；
导出默认值{
名称：“应用程序”，
组成部分：{
用户
},
数据：函数（）{
返回{
味精：“名字是邦德..詹姆斯·邦德”
};
}
};

User.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>

<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>

我的名字是“{myName}”
导出默认值{
数据（）{
返回{
我的名字：“邦德”
}
},
方法：{
changeName:函数（新名称）{
this.myName=newName
}
}
};

---

谢谢。

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

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

在您的示例中，要向父级授予对

myName

的访问权，请使用

作用域插槽

，并将setter或子实例传递给插槽父级。或者为插槽父级提供单击方法

---

这与为什么不向子对象发送事件密切相关。有关更多信息，请参阅。

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

你能详细说明你的答案吗？请看这篇关于如何回答问题的文章