在子组件上创建一个自定义方法,这个自定义方法的处理函数是父组件里的方法,子组件触发这个方法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子组件控制父组件</title> <style> .show{ width:100px; height: 100px; text-align: center; font-size: 20px; line-height: 100px; background-color: rgba(0,0,136,0.36); } </style> </head> <body> <div id="app"> <father></father> </div> <template id="father"> <div> father <button @click="show">show/hide</button> <div class="show" v-if="showState"></div> <hr> <son @test="show"></son> </div> </template> <template id="son"> <div> son <button @click="sclick">点击</button> </div> </template> <script src="vue.js"></script> <script> Vue.component('father',{ template:"#father", data(){ return{ showState:true } }, methods:{ show(){ this.showState=!this.showState; }, sayHellow(){ console.log('你好'); } } }) Vue.component('son',{ template:"#son", data(){ return{ } }, methods:{ sclick(){ console.log('点击子组件的button'); this .$emit('test'); } } }) new Vue({ el:"#app" }); //在子组件上创建一个自定义方法 // 这个自定义方法的处理函数是父组件的方法,由子组件触发这个方法 </script> </body> </html>
结果截图:(点击子组件按钮可以控制父组件内的显示与隐藏)