Vue || Props传值 父传子，子传父

1.自己写的提示子，只共参考，只是个人理解

一：这个是父组件，在view中创建index.vue

<template>
    <div class="fathere">
        <!-- handle="accept" @han="hcc" -->
        <Son txt="1222" :list="list" :send="send" ref="Text"></Son>
        <!-- <input type="text" ref="Text"> -->
    </div>
</template>
<script lang="ts" setup>
import Son from '@/components/son.vue';
import { onMounted, ref } from "vue"




// 父传子:父组件传一个特定的数组（list） :list="list" 通过这样就可以传过去了，在子组件中定义类型在通过  props.list 进行输出到控制台
// 父组件传值   创建一个list 数组并且定义类型
const list = ref<string[]>(['父数据', '父数据', '父数据',])

// 子组件传过来的参数   函数形式
const send = (data: string) => {
    console.log("data", data);

}



// interface VueCom {
//     value: HTMLDivElement,
//     arr: number[]
// }

// const Text = ref<VueCom | null>(null)

// onMounted(() => {
    // console.log(Text.value!.arr, 111);

// })

// 自定义组件传参 事件
// const accept = (data: string) => {
//     console.log(data, accept);

// }
// const hcc = (data: string) => {
//     console.log(data, hcc);

// }







</script>

二：在components中创建子组件

<template>
    <div class="son">
        this is son<br>
        <!-- <button @click="FnSend">点击</button><br>
        <button @click="Fnhan">点击</button> -->

    </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';
import { ref } from "vue"



const emit = defineEmits(['handle', 'han'])

const props = defineProps({
    txt: String,
    list: Array,
    send: Function,
})
console.log(props.list);



const num: string[] = ["子数据", "子数据","子数据"]
console.log(props.send!(num))
// 子传父  ： 父组件中传给子组件一个函数，通过这个函数来调用，子组件中的数据就可以通过这个函数传过去



// 事件传参  click 
// const FnSend = () => {
//     emit('handle', [21, 34, 56])
// }
// const Fnhan = () => {
//     emit('han', [1, 2, 3])
// }






</script>