vue3 传值的几种方式
一.父组件传子组件
父组件
//父组件
<Decisionobject :Decisionselected="Decisionselected"></Decisionobject>
<script lang="ts" setup>
let Decisionselected = ref(false);
</script>
子组件
<script lang="ts" setup>
import { defineProps } from 'vue';
import { ref, watch } from 'vue';
const props = defineProps({
Decisionselected: Boolean
});
//watch监听事件监听父组件传过来的值
watch(() => props.Decisionselected, (newVal) => {
console.log('父组件传递过来的值', newVal);
});
</script>
二.子组件传父组件
子组件
<script lang="ts" setup>
import { defineEmits} from 'vue';
const emit = defineEmits(['accuracy']);
//通过点击事件传递
const handleOk = (e: MouseEvent) => {
visible.value = false
emit('accuracy', accuracy);
};
</script>
父组件
<surfaceunit @sendUnitdivision="sendUnitdivision" >
<script lang="ts" setup>
const accuracy = (e) => {
console.log(e, '传的值');
}
</script>