vue父组件如何调用子组件的属性或方法

最新推荐文章于 2024-08-07 14:55:26 发布

weixin_30703911

最新推荐文章于 2024-08-07 14:55:26 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/wuxianqiang/p/9711130.html

版权

常常我们需要组件的拆分，就涉及到父子调用的关系，那么父组件如何调用子组件的属性和方法呢？

子组件child

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    fn () {
      this.msg = ''
    }
  }
}
</script>

父组件parent

<template>
  <child ref="child"></child>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },
  methods: {
    handleClick () {
      this.$refs.child.fn() // 调用子组件的方法
      console.log(this.$refs.child.msg) // 获取子组件的属性
    }
  }
}
</script>

总结：父组件是通过refs去引用组组件，可以得到子组件的所以属性和方法。

转载于:https://www.cnblogs.com/wuxianqiang/p/9711130.html