Vue.js框架--父组件与子组件交互数据（十四）

我会带着你远行 2024-02-18 23:29 44阅读 0赞

**主要操作技能：**  
 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>

**效果：**

**![70][]**

![70 1][]

![70 2][]

![70 3][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/36751e19b664409f898b2cf44008b9e3.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c9e5d49815d349b4a97e8b443640fda4.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b1a3f9936d064fc89507b7016879ea14.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9d7c8d3c0ae0470ba239c1ec55912281.png