【收藏】Vue中ref和$refs的介绍及使用

实例(通过ref特性调用子组件的方法)

【1】子组件code:

<template>
    <div>{{msg}}</div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: '我是子组件'
    }
  },
  methods: {
    changeMsg() {
      this.msg = '变身'
    }
  }
}
</script>
 
<style lang="sass" scoped></style>

【2】父组件code:

<template>
  <div @click="parentMethod">
    <children ref="children"></children>
  </div>
</template>
 
<script>
import children from 'components/children.vue'
export default {
  components: { 
    children 
  },
  data() {
    return {}
  },
  methods: {
    parentMethod() {
      this.$refs.children  //返回一个对象
      this.$refs.children.changeMsg() // 调用children的changeMsg方法
    }
  }
}
</script>
 
<style lang="sass" scoped></style>

https://blog.csdn.net/qq_38128179/article/details/88876060

上一篇:vue项目中input框默认获得焦点,回车选中输入文本


下一篇:为什么 this.$refs[formName].validate((valid) =>{} 无效(没有反应)