父组件:
<template> <div> <child></child> </div> </template> <script> import child from '~/components/child'; export default { components: { child }, methods: { fatherMethod() { console.log('父组件方法'); } } }; </script>
子组件:
<template> <div> <button @click="childMethod()">点击</button> </div> </template> <script> export default { methods: { childMethod() { //this.$parent.$parent.fatherMethod();多试几层 this.$parent.fatherMethod(); } } }; </script>
父组件:
<template> <div> <child @fatherMethod="fatherMethod"></child> </div> </template> <script> import child from '~/components/child'; export default { components: { child }, methods: { fatherMethod() { console.log('父组件方法'); } } }; </script>
子组件:
<template> <div> <button @click="childMethod()">点击</button> </div> </template> <script> export default { methods: { childMethod() { this.$emit('fatherMethod'); } } }; </script>
父组件:
<template> <div> <child :fatherMethod="fatherMethod"></child> </div> </template> <script> import child from '~/components/child'; export default { components: { child }, methods: { fatherMethod() { console.log('父组件方法'); } } }; </script>
子组件:
<template> <div> <button @click="childMethod()">点击</button> </div> </template> <script> export default { methods: { childMethod() { if (this.fatherMethod) { this.fatherMethod(); } } } }; </script>