组件函数的调用

通过Vue提供的ref属性去访问子组件实例,并调用子组件中的方法

调用子组件中的方法

通过ref属性来访问子组件实例,并调用子组件中的方法:

1. 给要访问的子组件添加ref属性

<template>
  <Modal ref="modal"></Modal>
</template>

2. 调用子组件中的方法
   通过this,$refs.modal来访问自定义组件Modal.vue:

<script>
export default {
  methods: {
    showModal() {
      // 调用子组件中的 show 方法
      this.$refs.modal.show();
    }
  }
};
</script>

ref访问子元素

<template>
  <div id="app">
    <input ref="input" type="text" />
    <button @click="focusInput">点击使输入框获取焦点</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    focusInput() {
      // this.$refs.input 访问输入框元素，并调用 focus() 方法使其获取焦点
      this.$refs.input.focus();
    }
  }
}
</script>

案例来自优课达