首先环境要说一下,是vue-cli 脚手架 搭的webpack
下面是父页面的写法
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App', provide(){ return{ say:this.say } }, methods:{ say(){ alert("这是父页面的方法"); } } } </script> <style> </style>
下面是子页面的写法
<template> <button @click="recv">点击调用父页面的方法</button> </template> <script> export default { inject:['say'], methods:{ recv(){ this.say(); } } } </script>
运行结果