vue3父子组件的传参方式

在路上_a

已于 2024-04-16 09:24:39 修改

阅读量144

点赞数 3

文章标签： vue.js javascript 前端

于 2024-04-15 10:18:53 首次发布

本文链接：https://blog.csdn.net/abc_26zm/article/details/137769669

版权

父到子

//父
  <son :sondata="sondata" ></son>
//子
import {defineProps} from 'vue';
const dataInfo= defineProps({
    sondata: {
        type: Array,
        default: () => {
            return []
        }
    }
})

子到父（两种方式可以一起使用）

1.通过自定义方法的方式去传参

//子组件
import {  defineEmits } from 'vue';
const emitEvent = defineEmits(['sonclick'])

const someMethod = () => {
   emitEvent('sonclick', 123, 456)
}

//父组件
 <son-html @sonclick="tiemData" ></son-html>
 
 const tiemData = （a，b）=>{
 	console.log(a,b)
 }

2.自定义需要暴露出去的方法和参数

//子
//在 <script setup>内可以直接用 defineExpose

import { defineExpose } from 'vue';
defineExpose({
    getName: () => {
        return 'getName方法传参';
    },
    age:123
})

//父
  <son-html ref='son' ></son-html>
  const son = ref()
	onMounted(() => {
		 console.log(son.value?.['getName']())
		 console.log(son.value?.['age'])
	})

3.祖孙组件传值

//祖
  <script setup>
    import { provide } from "vue";
    import Father from "../components/FatherComponent.vue"
    let grandFather = reactive({
      message:"来自祖父组件传值"
    })
    provide('grandFather',grandFather)
    </script>

    <template>
      <Father></Father>
    </template>


//孙
<script setup >
    import { inject } from 'vue';
    const grandSon  = inject('grandFather',{})</script>
    <template>
        <div>
     		测试祖组件->孙组件传值消息:{{ grandSon.message }}
        </div>
    </template>