13.子组件主动获取父组件的数据和方法
子组件主动获取父组件的数据和方法
1.父组件Home.vue
<template> <div> <h2>{{msg}}</h2> <v-header></v-header> </div> </template> <script> import Header from "./Header.vue"; export default { name: 'home', data () { return { msg:'首页组件', title:'父组件' } }, methods:{ run(){ alert('父组件方法') } }, components:{ 'v-header':Header } } </script> <style lang="scss" scoped> h2{ color: red; } </style>
2.子组件Header.vue
<template> <div> <h2>{{msg}}</h2> <button @click="getData()">获取父组件数据</button> <button @click="getFunction()">获取父组件的方法</button> </div> </template> <script> export default { name: 'Header', data () { return { msg:'头部组件', title:'子组件' } }, methods:{ getData(){ console.log(this.$parent.title) }, getFunction(){ this.$parent.run() } } } </script> <style lang="scss" scoped> h2{ color: green; } </style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步