1.prop
通过defineProps定义该组件的入参,它在初始化时执行一次,参数在组件内是只读的,不能被修改,想要修改它,就必须将它赋值给一个变量,在组件中操作该变量即可。
defineProps({
value: String,
});
父组件向子组件传值,可通过:value=“变量”
- emit
通过defineEmits,向外暴露事件,并将值传递向外部,外部通过@change=“”,触发
const emit = defineEmits([ 'change']); // 声明
const change = (value) => {
emit('change', value);// 在合适的位置暴露出去,将值传递给父组件,也可以添加回调函数,当父组件代码执行完后,返回某个状态或值,子组件接着执行下面的业务逻辑
};
3.watch监听器
由于prop的参数只执行一次,当外部的值发生改变时,组件内的值并没有改变,这里需要将值实时监听,并做同步。
import { ref, reactive, watch } from 'vue';
defineProps({
value: String,
});
const newvalue = ref('')
watch(() => props.value,
(newVal, oldVal) => {
newvalue= newVal;
}
);
语法糖,v-model如何实现,vue3中,v-model的命名为modelValue
,我们需要在defineProps中声明一个modelValue
的入参,还要在defineEmits中声名update:modelValue
,并在合适的位置,向外暴露,
<template>
<div>
<a-select :model-value="modelValue" allow-clear @change="change">
<a-option
v-for="(item, index) of MODE.data"
:key="index"
:value="item.MODEL_NM"
:label="item.RL_NM"
/>
</a-select>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { queryModeList } from '@/api/common';
const MODE = reactive({ data: [] });
queryModeList({}).then(({ data }) => {
MODE.data = data.VALUE_LIST;
});
const emit = defineEmits(['update:modelValue', 'change']);
defineProps({
modelValue: String,
});
const change = (value) => {
emit('update:modelValue', value);
emit('change', value);
};
</script>