vue父组件获取子组件date和methods

问题

 在vue中组件之间的互相调用是很频繁的;而且组件与组件之间的关系也有很多种,本篇文章只讨论父组件与子组件之间的关系。分两种情况,一种是父组件调用子组件的数据和方法,另一种就是子组件主动调用父组件的数据和方法。

定义一个子组件Header

<template>
    <div class="app-header">
		
    </div>
</template>
export default {
    components: {},
    data() {
	return {
		test:'hello world'
	};
    },
    methods: {
	hello(){
		console.log("我是子组件中的--hello world")
	}
    },
};

 这个组件中定义了一个test属性和一个hello方法,我们要在父组件中获取test数据和调用hello方法。

父组件

<template>
	<div class="">
		<button>获取子组件data中数据</button>
		<button>调用子组件中的方法</button>
		<Header ref="header"></Header>
	</div>
</template>
import Header from '@/components/Header.vue'
export default {
    components: {
	Header
    },
    data() {
	return {};
    },
    methods: {
	getChileTest(){
		console.log(this.$refs.header.test)
	},
	getChileHello(){
		this.$refs.header.hello()
	}
    },

};

 在父组件中首先要引入子组件,并且在components{}中定义,上面的代码中定义了两个方法,分别是获取子组件的数据和调用子组件中的方法。

父组件调用子组件数据和方法

  • this.$refs.header.子组件中属性名
  • this.$refs.header.子组件中方法名

 通过上面两个 vue语句就可以实现我们的需求了

结果如下

捕获.JPG

子组件掉调用父组件属性和方法

在父组件中添加一个属性和方法
export default {
    components: {
	Header
    },
    data() {
	return {
	    animal:'dog'
	};
    },
    methods: {
	getChileTest(){
		console.log(this.$refs.header.test)
	},
	getChileHello(){
		this.$refs.header.hello()
	},
	eat(){
		console.log(this.animal+"吃饭!")
	}
    },

};
修改子组件
<template>
    <div class="app-header">
	<button @click="getParentAnimal()">获取父组件属性</button>
	<button @click="getParentEat()">获取父组件方法</button>
    </div>
</template>
export default {
    components: {},
    data() {
	return {
		test:'hello world'
	};
    },
    methods: {
	hello(){
		console.log("我是子组件中的--hello world")
	},
	getParentAnimal(){
		console.log(this.$parent.animal)
	},
	getParentEat(){
		this.$parent.eat()
	}
    },
};
  • this.$parent.父组件中属性
  • this.$parent.父组件中方法
结果如下

捕获.JPG

总结

父组件调用子组件
  • this.$refs.header.子组件中属性名
  • this.$refs.header.子组件中方法名
子组件调用父组件
  • this.$parent.父组件中属性
  • this.$parent.父组件中方法
# vue 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×