1.父传子:
vue的父组件传递给子组件只需要通过自定义属性传递到子组件,子组件通过props获取传递的参数。
//父组件 <template> <h3>父</h3> <child :title="arr1" /> </template> <script setup> import { ref } from "vue"; import child from "./b.vue"; const arr1 = ref([]); </script>
<template> <h3>子</h3> <p >{{ props.title }}</p> </template> <script setup> import {ref,defineProps} from 'vue'; const props = defineProps(['title']); </script>
2.子传父:
子传父是通过edit设置自定义事件,在父组件中绑定事件,子组件中重复。
//子组件 <template> 子组件 <button @click="cs">测试</button> </template> <script setup> import { defineEmits } from "vue"; const emit = defineEmits(['Fclick']); const cs = () => { emit('Fclick','子传父'); }; </script>
//父组件 <template> <h3>测试子传父</h3> <Child @fclick="trigger" /> <p>{{ a }}</p> </template> <script setup > import { ref } from "vue"; import Child from "./component.vue"; const a = ref(""); const trigger = (data) => { console.log(data); a.value = data }; </script>