vue3 JSX中 使用 $attrs

1,131 阅读1分钟

Vue3 组件开发中,JSX如何使用$attrs把属性和方法传给子组件,如下一个例子记录:

Vue3将 listener删除了,统一使用listener 删除了,统一使用 attrs 中包含属性和方法

const SearchTextBtn = defineComponent({
  name: 'SearchTextBtn',
  components: { Search },
  inheritAttrs: false,
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    }
  },
  emits: ['update:modelValue', 'refresh'],
  setup(props, { emit, attrs }) {
    const keywordSearch = useVModel(props, 'modelValue', emit)
    const handleQuery = () => {
      emit('refresh', keywordSearch.value)
    }

    return () => (
      <el-input
        {...attrs}
        v-model={keywordSearch.value}
        clearable
        placeholder={props.placeholder}
        onClear={handleQuery}
        onKeyup={(event) => {
          if (event.key === 'Enter') handleQuery()
        }}
        v-slots={{
          append: () => <el-button icon={Search} onClick={handleQuery} />
        }}
      ></el-input>
    )
  }
})
export default SearchTextBtn