Vue3 组件开发中,JSX如何使用$attrs把属性和方法传给子组件,如下一个例子记录:
Vue3将 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