vue父组件获取子组件的数据和方法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue父组件获取子组件的数据和方法相关的知识,希望对你有一定的参考价值。
参考技术A 1.调用子组件的时候 定义一个ref2.在父组件里面通过
在子组件里面通过
摘自: https://www.jianshu.com/p/b6c553b89f26
12.父组件主动获取子组件的数据和方法
父组件主动获取子组件的数据和方法
1.父组件Home.vue
<template> <div> <h2>{{msg}}</h2> <!-- 1.调用子组件的时候调用一个ref --> <!-- 2.在父组件中通过this.$refs.header.数据 this.$refs.header.方法 调用子组件的数据和方法 --> <!-- 注意,第一步是ref,第二步是refs --> <v-header ref="header"></v-header> <button @click="getData()">获取子组件数据</button> <button @click="getFunction()">获取子组件的方法</button> </div> </template> <script> import Header from "./Header.vue"; export default { name: ‘home‘, data () { return { msg:‘首页组件‘, } }, methods:{ getData(){ alert(this.$refs.header.msg) }, getFunction(){ this.$refs.header.run() } }, components:{ ‘v-header‘:Header } } </script> <style lang="scss" scoped> h2{ color: red; } </style>
2.子组件Header.vue
<template> <div> <h2>{{msg}}</h2> </div> </template> <script> export default { name: ‘Header‘, data () { return { msg:‘头部组件‘, title:‘子组件‘ } }, methods:{ run(){ alert(‘子组件run方法‘) } } } </script> <style lang="scss" scoped> h2{ color: green; } </style>
以上是关于vue父组件获取子组件的数据和方法的主要内容,如果未能解决你的问题,请参考以下文章