Vue中父子组件主动获取值和传值
父组件主动获取子组件的数据和执行子组件方法
调用子组件的时候定义一个ref
<v-child ref="child"></v-child>
父组件主动获取子组件数据
this.$refs.child.属性
父组件主动执行子组件方法
this.$refs.child.方法
父组件通过$refs主动获取子组件的数据和执行子组件方法
子组件Header.vue
<template>
我是Header组件
</template>
<script>
export default {
name: "",
data() {
return {
msg:"我是子组件的Msg",
}
},
methods: {
run(){
console.log("我是子组件的Run");
}
}
}
</script>
父组件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();
}
}
}
</script>
子组件主动获取父组件的数据和执行父组件方法
子组件主动获取父组件的数据
this.$parent.数据
子组件主动获取父组件的方法
this.$parent.方法
父组件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>
子组件Header.vue主动获取父组件的数据与方法
<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>