uni-app或vue开发中组件是非常常见的一种状态，组件的应用也就涉及到了在父级页面中动态修改组件数据已经调用子组件中的方法。

本篇博客就来详细介绍如何在父级中实现对子组件中data值的动态设置以及调用子组件方法解析：

组件代码：

<template>
	<view class="">
		{{val}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				val:"六月初博客站"
			};
		},
		props: {
		},
		methods:{
			methodVal:function(){
				this.val="通过子组件修改值"
			}
		},
		
		
	}
</script>

<style lang="scss">
</style>

父级代码：

<template>
	<view class="content">
		<test ref="test"></test>
		<view class="" @tap="clickVal">
			点击直接改变组件data值
		</view>
		
		<view class="" @tap="clickMothed">
			点击直接改变组件data值
		</view>
		
	</view>
</template>

<script>
	import test from '@/components/test/index.vue'
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			
			
		},
		components: {
			test
		},
		methods: {
			clickVal:function(){
				this.$refs.test.val = "父级修改后的值";
			},
			clickMothed:function(){
				this.$refs.test.methodVal();
			}
		},
	}
</script>

<style>
	
</style>

项目结构图：

代码解析：

主要点在于通过对组件进行一个ID标识，然后通过this.$refs.ID标识来进行子组件方法的调用和值的动态设置

父级调用子组件方法：

this.$refs.ID标识.子组件方法名;
如：
this.$refs.test.methodVal();

父级动态修改子组件data值：

this.$refs.ID标识.子组件data名称 = "你要修改后的名称";
如：
this.$refs.test.val = "父级修改后的值";

学习无止境，愿一切都好！