我有一个组件，想要在Vue中为其添加一个点击监听器，并运行父模板中的一个方法。这是否可行？
<template>
<custom-element @click="someMethod"></custom-element>
</template>
<script>
export default {
name: 'template',
methods: {
someMethod: function() {
console.log(true);
}
}
</script>
是的！
在Vue组件中，可以通过调用$parent属性来从子组件中调用父组件的方法，非常简单。
这里有一个演示如何实现这一功能的JSFiddle：https://jsfiddle.net/50qt9ce3/1/
<script src="https://unpkg.com/vue"></script>
<template id="child-template">
<span @click="someMethod">Click me!</span>
</template>
<div id="app">
<child></child>
</div>
<script>
Vue.component('child', {
template: '#child-template',
methods: {
someMethod(){
this.$parent.someMethod();
}
}
});
var app = new Vue({
el: '#app',
methods: {
someMethod(){
alert('parent');
}
}
});
</script>
注意: 尽管在构建不连通的可重用组件时不推荐这样做，但有时候我们正在构建相关的非可重用组件，在这种情况下非常方便。
this.$parent.$parent.myMethod或者this.$parent.$parent.$parent.myMethod等方法。可能会出现您的方法不在直接父组件中，而是在更高层次的组件层级中的情况。请注意不要改变原意。 - Ilyich
点击我！
点击我！
</template>` - migli直接来自Vue.js documentation：
在Vue中，父子组件关系可以概括为props向下传递，事件向上传递。父组件通过props向子组件传递数据，而子组件通过事件向父组件发送消息...
因此，当子组件发生某些事情时，您需要从子组件发出一个click事件，这个事件可以用来调用父模板中的方法。
如果您不想从子组件显式地发出事件（使用this.$emit('click')从子组件中），您还可以尝试使用native click event，@click.native="someMethod"。
依赖于调用this.$parent会隐藏依赖项，并且在使用创建更长子层次结构的组件库时会中断。
Passing props (parent-child)
var SomeComponentA = Vue.extend({
methods: {
someFunction: function () {
// ClassA some stuff
}
}
});
var SomeComponentB = Vue.extend({
props: [ 'someFunctionParent' ],
methods: {
someFunction: function () {
// Do your stuff
this.someFunctionParent();
}
}
});
and in the template of SomeComponentA:
<some-component-b :someFunctionParent="someFunction"></some-component-b>
Use Mixins
If this is common functionality that you want to use in other places, using a mixin might be more idiomatic:
var mixin = {
methods: {
someFunction: function() {
// ...
}
}
};
var SomeComponentA = Vue.extend({
mixins: [ mixin ],
methods: {
}
});
var SomeComponentB = Vue.extend({
methods: {
someFunctionExtended: function () {
// Do your stuff
this.someFunction();
}
}
});
您可以在纯Vue中使用$root像这样，但是，如果您在Vue中使用nuxt，那么该响应将不起作用。为什么？因为$root就是nuxt本身。让我给您举个例子：
this.$root.$children[1].myRootMethod()
$root: 正如我之前所说，这是nuxt。
$children[0]: 这是nuxtloading。
$children[1]: 这是您的主组件，在我的情况下，它是一个基本布局，具有一些全局组件和全局mixin。
$children[n]: 应用程序中的其他组件。
希望能帮到您。
this.$parent.parentMethod() - Chase Choivar SomeComponentA = Vue.extend({
methods: {
someFunction: function () {
// ClassA some stuff
}
}
});
var SomeComponentB = Vue.extend({
props: [ 'someFunctionParent' ],
methods: {
someFunction: function () {
// Do your stuff
this.someFunctionParent();
}
}
});
HTML部分：
<some-component-b someFunctionParent="someFunction"></some-component-b>
基于这篇文章，应该按照以下方式进行修改：
<some-component-b v-bind:someFunctionParent="someFunction"></some-component-b>
Vue 3的解决方案：
提供一个函数给子组件的另一种方式是使用provide/inject。其优点在于，您可以避免通过多个组件传递props，因为inject可以在任何深度的子组件中使用。
父组件:
<script setup>
import { provide } from 'vue'
myFunction(){
console.log('message from parent');
}
provide('message', myFunction);
一些子组件：
<script setup>
import { inject } from 'vue'
const msg = inject('message')
//calling the injected function
msg()
</script>
查看文档.
custom-element时，将运行someMethod。这是您想要的吗，还是有其他场景？ - Bert