您现在的位置是：网站首页> 小程序设计
Vue之父组件如何调用子组件的属性和方法
- 小程序设计
- 2021-07-04
- 808人已阅读
总结：$refs和生命周期有关【必须页面渲染完毕之后 才能正常访问其内部的属性】
父组件parent.vue
<template>
<view>
<!-- 这里的child可以随意取,但是必须唯一,在refs对象中 -->
<child ref="child"></child>
</view>
</template>
<script>
import Child from "@/pages/test/child.vue"
export default {
created(){
// 可以正常访问
console.log("created",this.$refs)
// 结果underfined
console.log("created",this.$refs.child)
},
mounted() {
// 这里的访问都是正常的【注：this.$refs必须父组件渲染完毕之后才能正常访问内部的属性或方法】
console.log("mounted",this.$refs)
console.log("mounted",this.$refs.child)
console.log("mounted",this.$refs.child.name)
console.log("mounted",this.$refs.child.age)
console.log("mounted",this.$refs.child.getName())
},
components: {
Child
},
}
</script>
<style>
</style>
子组件child.vue
<template>
<view class="child">
</view>
</template>
<script>
export default {
data() {
return {
name: "child"
}
},
methods: {
getName() {
return this.name
}
},
props:{
age:{
type:Number,
default:18
}
}
}
</script>
<style>
</style>