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

访问子组件实例或者子元素，通过ref为子组件赋予一个ID引用，在vue的js可通过this.$refs.xxx来获取到组件对象。1、子组件<template><view><input :v-model="message" type="text" placeholder="请输入内容"/></view></template><scri

姚华军

3803人浏览 · 2021-10-09 17:59:26

姚华军 · 2021-10-09 17:59:26 发布

访问子组件实例或者子元素，通过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>