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>