版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/82387179
主要操作技能:
1、 父组件主动获取子组件的数据和方法
* 1>调用子组件的时候定义一个ref
<v-header ref='header'></v-header>
2>在父组件中通过
* this.$refs.header.属性
*
* this.$refs.header.方法
2、子组件主动获取父组件的数据和方法
* this.$parent.属性
*
* this.$parent.方法
编写代码:
Header.vue (子组件)
<template>
<div>
<h2>{{msg}}</h2>
<button @click="getParent()">获得父组件的属性和方法</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: '子组件属性'
}
},
methods: {
my(){
alert("子组件的方法!");
},
getParent(){
alert(this.$parent.msg);
this.$parent.run('param');
}
}
}
</script>
Home.vue (父组件)
<template>
<!--所以的内容多要被根节点包含起来 -->
<div id="home">
<v-header ref="header"></v-header><br /><br />
<br />
<button @click="getChild()">获得子组件的属性和方法</button>
</div>
</template>
<script>
/**
* 父组件主动获取子组件的数据和方法
* 1>调用子组件的时候定义一个ref
*
* <v-header ref='header'></v-header>
*
* 2>在父组件中通过
*
* this.$refs.header.属性
*
* this.$refs.header.方法
*
*
* 子组件主动获取父组件的数据和方法
*
* this.$parent.属性
*
* this.$parent.方法
*
*/
import Header from './Header.vue'
export default {
data() { //数据
return {
msg: 100,
title: '父组件参数' //父组件数据
}
},
components: {
'v-header': Header
},
methods: {
run(result) {
alert('我是父组件的run方法--->'+result);
},
getChild(){
alert(this.$refs.header.msg);
this.$refs.header.my();
}
}
}
</script>
效果: