uni-app,使用ref调用子组件内容

访问子组件实例或者子元素,通过ref为子组件赋予一个ID引用,在vue的js可通过this.$refs.xxx来获取到组件对象。
1、子组件

<template>
	<view>
		<input :v-model="message" type="text" placeholder="请输入内容"/>
	</view>
</template>

<script>
	export default {
		name: "base-input",
		data() {
			return {
				message: ""
			}
		}
	}
</script>

2、父组件

<template>
	<view>
		<base_input ref="usernameInput"></base_input>
		<button type="default" @click="getFocus">获取焦点</button>
		<view>{{message}}</view>
	</view>
</template>

<script>
	import base_input from '../dj-office/base_input.vue'
	export default {
		data() {
			return {
				message: "123"
			}
		},
		methods: {
			getFocus() {
				this.message = this.$refs.usernameInput.message
			}
		},
		components: {
			base_input
		}
	}
</script>

版权声明:本文为yhj_911原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。