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

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

 

效果：