vue中父组件获取子组件的数据与方法，子组件获取父组件中的数据与方法

﹏ヽ暗。殇╰゛Y 2023-08-17 15:33 125阅读 0赞

## 父组件获取子组件中的数据与方法 ##

1.调用子组件的时候，通过设置ref

2.在父组件中通过

this.$refs.child.属性      //this.$refs 获取子组件中的内容
    this.$refs.child.方法

父组件

<template>
        <div id="father">
            <Child ref="child"></Child>
            <button @clik="child()">获取子组件的数据与方法</button>
        </div>
    </template>
    
    <script>
        import Child from "./Child";
        export default { 
            data(){ 
                return{ 
                    title:'我是父组件中的数据'
                }
            },
            //组件声明
            components:{ 
                Child
            },
            methods:{ 
                child(){ 
                    alert(this.$refs.child.name)  //this.$refs 获取子组件的内容
                },
                father(){ 
                    alert("我是父组件中的parent方法")
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

## 子组件获取父组件中的数据与方法 ##

子组件通过

this.$parent.属性
    this.$parent.方法

子组件

<template>
        <div id="child">
            <button @click="father()">获取父组件中的数据与方法</button>
        </div>
    </template>
    
    <script>
        export default { 
           data(){ 
               return{ 
                   name:"我是子组件中的数据"
               }
           },
            methods:{ 
               father(){ 
                   alert(this.$parent.title) // this.$parent 获取父组件
                   this.$parent.father()  //获取父组件的方法
               }
            },
            props:['title','father']  //通过props接收父组件传递过来的数据
        }
    </script>
    
    <style scoped>
    
    </style>

参考链接：[添加链接描述][Link 1]

[Link 1]: https://blog.csdn.net/zhongshijun521/article/details/80610971