Parent-child components in Vue actively obtain and pass values
Article Directory
The parent component actively obtains the data of the child component and executes the method of the child component
Define a ref when calling a child component
<v-child ref="child"></v-child>
The parent component actively obtains the data of the child component
this.$refs.child.属性
The parent component actively executes the method of the child component
this.$refs.child.方法
The parent component actively obtains the data of the child component and executes the method of the child component through $refs
Subcomponent Header.vue
<template>
我是Header组件
</template>
<script>
export default {
name: "",
data() {
return {
msg:"我是子组件的Msg",
}
},
methods: {
run(){
console.log("我是子组件的Run");
}
}
}
</script>
The parent component Home.vue calls the child component
<template>
<v-header ref="header"></v-header>
<br>
我是Home组件
<br>
<button @click="getChildMsg()">获取子组件的数据</button>
<br>
<button @click="getChildFn()">调用子组件的方法</button>
</template>
<script>
import Header from "@/components/Header";
export default {
name: "",
data() {
return {
msg:"我是父组件的Msg",
}
},
components:{
"v-header":Header,
},
methods: {
getChildMsg(){
// 获取子组件数据
console.log(this.$refs.header.msg);
},
getChildFn(){
// 执行子组件方法
this.$refs.header.run();
}
}
}
</script>
The child component actively obtains the data of the parent component and executes the method of the parent component
The child component actively obtains the data of the parent component
this.$parent.数据
The child component actively obtains the method of the parent component
this.$parent.方法
Parent component Home.vue
<template>
<v-header ref="header"></v-header>
<br>
我是Home组件
<br>
<button @click="getChildMsg()">获取子组件的数据</button>
<br>
<button @click="getChildFn()">调用子组件的方法</button>
</template>
<script>
import Header from "@/components/Header";
export default {
name: "",
data() {
return {
msg:"我是父组件的Msg",
}
},
components:{
"v-header":Header,
},
methods: {
getChildMsg(){
// 获取子组件数据
console.log(this.$refs.header.msg);
},
getChildFn(){
// 执行子组件方法
this.$refs.header.run();
},
run(){
console.log("我是父组件的Run方法");
}
}
}
</script>
The subcomponent Header.vue actively obtains the data and methods of the parent component
<template>
我是Header组件
<br>
<button @click="getFatherMsg()">获取父组件的数据</button>
<br>
<button @click="getFatherFn()">获取父组件的方法</button>
</template>
<script>
export default {
name: "",
data() {
return {
msg:"我是子组件的Msg",
}
},
methods: {
run(){
console.log("我是子组件的Run");
},
getFatherMsg(){
// 获取父组件数据
console.log(this.$parent.msg);
},
getFatherFn(){
// 获取父组件方法
this.$parent.run();
}
}
}
</script>