vue3 update:modelValue用法小结
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">标准使用</a></li><li><a href="#_label1">自定义模型参数</a></li><li><a href="#_label2">总结</a></li></ul></div><p>在Vue 3中，<code>update:modelValue</code>是<code>v-model</code>指令的默认事件，用于在组件内部通知父组件更新绑定的值。这种命名约定是固定的，当你在组件上使用<code>v-model</code>而没有指定参数时。然而，Vue 3也提供了灵活性，允许开发者自定义绑定的属性和事件，以适应不同的场景和需求。</p><p class="maodian"><a name="_label0"></a></p><h2>标准使用</h2>
<p>当你在Vue组件上使用<code>v-model</code>时，默认情况下它绑定到组件的<code>modelValue</code> prop，并监听<code>update:modelValue</code>事件。这是Vue框架的标准命名约定。这意味着，如果你在自定义组件内部需要接收输入并希望外部能够通过<code>v-model</code>与之双向绑定，你需要：</p>
<ol><li>接收一个名为<code>modelValue</code>的prop。</li><li>在需要更新值时，触发名为<code>update:modelValue</code>的事件。</li></ol>
<p class="maodian"><a name="_label1"></a></p><h2>自定义模型参数</h2>
<p>Vue 3支持通过使用<code>v-model</code>的参数来自定义这些名称。这对于创建可以接收和更新多个值的组件特别有用。例如，如果你有一个组件需要同时管理两种类型的数据（比如，一个颜色选择器可能需要分别控制颜色和透明度），你可以这样做：</p>
<div class="jb51code"><pre class="brush:js;"><template>
<input
type="color"
:value="modelValue"
@input="updateValue($event.target.value)"
>
<input
type="range"
:value="opacity"
@input="updateOpacity($event.target.value)"
>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
modelValue: String,
opacity: Number
});
const emit = defineEmits(['update:modelValue', 'update:opacity']);
function updateValue(value) {
emit('update:modelValue', value);
}
function updateOpacity(value) {
emit('update:opacity', value);
}
</script>
</pre></div>
<p>在父组件中使用：</p>
<div class="jb51code"><pre class="brush:js;"><template>
<ColorPicker
v-model="color"
v-model:opacity="colorOpacity"
/>
</template>
<script setup>
import { ref } from 'vue';
import ColorPicker from './ColorPicker.vue';
const color = ref('#ffffff');
const colorOpacity = ref(100);
</script>
</pre></div>
<p>在这个例子中，颜色和透明度分别通过<code>v-model</code>和<code>v-model:opacity</code>进行绑定，每个绑定分别监听它们自己的更新事件。</p>
<p class="maodian"><a name="_label2"></a></p><h2>总结</h2>
<p><code>update:modelValue</code>是Vue 3中用于<code>v-model</code>的默认事件命名约定，但不是固定不变的。开发者可以通过指定<code>v-model</code>的参数来自定义这些名称，这提供了额外的灵活性，使得组件可以根据不同的情况进行调整。这种灵活性是Vue 3对现代应用开发需求的响应。</p>
頁:
[1]