vue的父子传参

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>