父級(jí)組件
<template>
<div class="num" @click="changeNum">父級(jí)改變{{ num }}</div>
<!-- 修飾符 -->
<ModelDemo v-model:textValue.isEmpty="textValue" v-model="num"></ModelDemo>
<div>textValue - {{ textValue }}</div>
</template>
<script lang="ts" setup>
import ModelDemo from './ModelDemo.vue'
const num = ref<number>(10)
const textValue = ref('666')
const changeNum = () => {
num.value ++
}
</script>
子級(jí)組件
<template>
<div>
<div>
<span>子組件改變v-model{{ modelValue }}</span><el-input-number v-model="value" @input="inputFn"></el-input-number>
</div>
<div>
<span>子組件改變textInput</span>
<el-input v-model="tValue" @input="tValueFn"></el-input>
</div>
</div>
</template>
<script lang="ts" setup>
// 直接在 defineProps 泛型里定義
const props = defineProps<{
modelValue: number,
textValue: string,
textValueModifiers?: { // 綁定哪個(gè)固定在哪個(gè)后面加Modifiers
isEmpty: boolean
}
}>()
const $emit = defineEmits(['update:modelValue', 'update:textValue'])
const value = ref<number>(0)
const inputFn = (val: number) => {
console.log(val)
$emit('update:modelValue', val)
}
const tValue = ref<string>('')
const tValueFn = (val: string) => {
console.log(val)
$emit('update:textValue', props.textValueModifiers?.isEmpty && !val && '現(xiàn)在input框?yàn)榭张? || val)
}
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
