访问子组件实例或者子元素,通过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版权协议,转载请附上原文出处链接和本声明。