# 使用第三方组件的属性与自定义事件
<template>
<myInput v-model="text" @blur="handleBlur" :disabled="disabled" ref="mInput" />
</template>
<script setup>
import {ref, onMounted} from 'vue'
import myInput from './myInput'
const mInput = ref()
onMounted(() => {
console.log(mInput.value.eInput)
})
const text = ref('')
const disabled = ref(false)
const handleBlur = data => {
console.log(data)
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<el-input v-model="text" v-bind="$attrs" ref="eInput" />
</div>
</template>
<script setup>
import {ref, computed, defineExpose, defineProps,defineEmits, toRefs} from 'vue'
const props = defineProps({
modelValue: {
type:String
}
})
const { modelValue } = toRefs(props)
const emit = defineEmits(['update:modelValue'])
const text = computed({
get: () => modelValue.value,
set: val => {
emit('update:modelValue',val)
}
})
// 对父组件暴露第三方组件
const eInput = ref()
defineExpose({eInput})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25