子组件向父组件传递参数请看:vue3 子组件向父组件传递数据,函数_或非与博客-CSDN博客
父组件atherTitle,fatherMoney,fatherWifi,thisIsEmpty等都是传过去给子组件的
<template>
<el-row class="mb-4">
<el-button type="danger">props.vue传递父组件的参数到子组件,子组件用defineProps接收,fatherTitle和fatherMoney参数</el-button>
</el-row>
<!--传递父组件的参数到子组件-->
<Son :fatherTitle="xxxxx" :fatherMoney="money" :fatherWifi="wifi" :thisIsEmpty="myEmptyStr" :fatherArr="myArr"></Son>
</template>
<script lang="ts" setup>
import { ref,reactive,watch,watchEffect } from 'vue'
import Son from "./son.vue"//引入子组件
const xxxxx = ref("-----这是父组件的标题-----")
const money = ref(9999999999)
const wifi = reactive({pwd:222,name:"fffff"})
const myEmptyStr = ref("")
const myArr = reactive([{code:666,msg:"success"},{code:555,msg:"fail"}])
</script>
子组件接收defineProps() 接收父组件传递过来的参数,defineProps在setup语法糖可以直接使用,不需要import
<template>
<el-row class="mb-4">
<el-button type="success">son.vue:{{sonTitle}}-------{{fatherTitle}}-----{{fatherMoney}}</el-button>
<el-button type="success">{{fatherWifi}}--{{fatherWifi.pwd}}--{{fatherWifi.name}}</el-button>
<el-button type="danger">父传递的空字符串:{{myEmptyStr}}</el-button>
</el-row>
<el-row class="mb-4">
<el-button type="primary" v-for="(item,index) in fatherArr" :key="index">{{item}},{{item.code}}</el-button>
</el-row>
</template>
<script lang="ts" setup>
import { ref,reactive} from 'vue'
const sonTitle = "This is son title"
//接收父组件传过来的值,需要注意defineProps只能在setup语法糖里面使用,不需要import引入
const yyyy = defineProps({
fatherTitle:{
type:String,//类型字符串
default:'当前Child.vue的默认值'//如果没有传递msg参数,默认值是这个
},
fatherMoney:{
type:Number,//类型字符串
default:0//如果没有传递msg参数,默认值是这个
},
fatherWifi:{
type:Object,//类型字符串
default:{id:999}//如果没有传递msg参数,默认值是这个
},
myEmptyStr:{
type:String,
default:"myEmptyStr默认值为空字符串"
},
fatherArr:{
type:Object,//类型字符串
//default:[]//如果没有传递msg参数,默认值是这个
},
})
console.log(yyyy.fatherArr)
console.log("-------这是子组件---------")
console.log(yyyy.fatherWifi)
console.log(yyyy.fatherTitle)
</script>
下面展示子组件调用父组件的方法
子组件
<script lang="ts" setup>
import { ref,reactive} from 'vue'
//子组件调用父组件的方法,
//父组件的调用子组件的地方写上@onMySonFunc="fatherFunc"
const myEmit = defineEmits(["onMySonFunc"])//这样就调用到父组件的fatherFunc方法了
//传递参数: "调用父组件的方法"和666666
myEmit("onMySonFunc","调用父组件的方法",666666)
</script>
父组件@onMySonFunc="funcToSon",这样上面的子组件就能调用到父组件的funcToSon()方法了
<template>
<!--子组件调用父组件的funcToSon()方法-->
<Son @onMySonFunc="funcToSon"></Son>
</template>
<script lang="ts" setup>
import { ref,reactive} from 'vue'
import Son from "./son.vue"//引入子组件
const funcToSon = (name:any,id:number)=>{
console.log("子组件调用了父组件的funcToSon()方法",id)
return {message:name}
}
</script>
下面展示父组件用provide()向儿子组件和孙子,孙孙子传递参数的方法
父组件provide传递参数到其他子孙组件
<script lang="ts" setup>
import { provide } from 'vue'
provide('test001', "987654321")
//provide传递test001的参数,值是987654321到子孙节点
</script>
儿子组件用inject接收父组件传递过来的参数
<script lang="ts" setup>
import {inject} from "vue"
//儿子组件用inject接收父组件传递过来的参数
const provideFatherStr = inject('thisFromGrandFather')
</script>
孙子组件也可以用inject接收父组件传递过来的参数
<script lang="ts" setup>
import {inject} from "vue"
//孙子组件用inject接收它爷爷组件传递过来的参数
const provideFatherStr = inject('thisFromGrandFather')
</script>