方法：1、子元件中透過「this.$parent.event」來呼叫父元件的方法。 2.子元件用「$emit」向父元件觸發一個事件，父元件監聽這個事件即可。 3.父元件把方法傳入子元件中，在子元件裡直接呼叫這個方法即可。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
Vue中子元件呼叫父元件的方法，這裡有三種方法提供參考
第一種方法是直接在子元件中透過this.$parent.event來呼叫父元件的方法
父元件
<template>
<p>
<child></child>
</p>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>子元件
<template>
<p>
<button @click="childMethod()">点击</button>
</p>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>第二種方法是在子元件裡用$emit向父元件觸發一個事件，父元件監聽這個事件就行了。
父元件
<template>
<p>
<child @fatherMethod="fatherMethod"></child>
</p>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>子元件
<template>
<p>
<button @click="childMethod()">点击</button>
</p>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('fatherMethod');
}
}
};
</script>第三種是父元件把方法傳入子元件中，在子元件裡直接呼叫這個方法
父元件
<template>
<p>
<child :fatherMethod="fatherMethod"></child>
</p>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>子元件
<template>
<p>
<button @click="childMethod()">点击</button>
</p>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
if (this.fatherMethod) {
this.fatherMethod();
}
}
}
};
</script>【相關推薦：vue.js教學】
#以上是vue子元件怎麼呼叫父元件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
