vue3封装组件 父组件清空子组件input中的值
要清空子组件中的输入值，可以使用Vue的`ref`和`refs`属性来实现。以下是一个示例：
html
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="clearChildInput">清空子组件输入</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    clearChildInput() {
      fs.child.clearInput();
    }
  }
}
</script>
在父组件中，我们引入了子组件`ChildComponent`并将其用`ref`指定为`child`。然后，在点击按钮时，调用`clearChildInput`方法。
在子组件`ChildComponent`中，我们定义了一个`ref`为`inputRef`的`<input>`元素。然后，在子组件中添加清除输入的方法`clearInput`，通过`fs.inputRef.value = ''`来清空输入值。
html
<template>
  <div>
    <input ref="inputRef" type="text">
  </div>
</template>
<script>
html input type属性export default {
  methods: {
    clearInput() {
      fs.inputRef.value = '';
    }
  }
}
</script>
使用`fs.inputRef.value = ''`来清空输入值。然后，我们就可以通过在父组件中调用`fs.child.clearInput()`来清空子组件中的输入值。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。