vue3父子组件相互传值

父向子传值
父

<Menu :selectedKeys=”selectedKeys” />

传统
<script >
import { defineComponent, ref } from ‘vue’;
import Menu from ‘./components/menu.vue’;
export default defineComponent({
components: {

Menu,
},
setup() {
return {
selectedKeys: ref([‘4’]),
};
},
});
</script>

语法糖

<script setup>
import { defineComponent, ref } from ‘vue’;
import Menu from ‘./components/menu.vue’;

const selectedKeys=ref([‘4’])

</script>

父组件只需在子组件上声明一个变量即可。 :代表变量，可以传变量;否则只能传常量

子
<script lang=”ts”>
import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from ‘vue’;
export default defineComponent({
props:[‘selectedKeys’],
setup(props,ctx) {
const selectedKeys= props.selectedKeys
}
});
</script>
语法糖方式
<script setup>

const props = defineProps({
/**
* Whether to display text
*/
selectedKeys: { type: Array, default: [] },
});

</script>
子组件中需要在props中声明需要接收的变量名，setup中需要引用props，赋值时用props.变量名接收。return出去就可以用了

子组件向父组件传值
父

<submit class=”submit” @e_flag=”get_e_flag” />

const e_flag = ref(false);
const get_e_flag = (e) => {
e_flag.value = e;
};
父组件需要声明一个@方法get_e_flag接收子组件发送的值,在该方法中赋值给需要的变量

子

setup(props, ctx) {
……
const spyder_go = () => {
ctx.emit(‘e_flag’,e_flag.value)
子组件中需要在setup中使用ctx，使用ctx.emit向父组件传值。该方法需要调用，比如点击或者onMounted