https://blog.csdn.net/qq_27517377/article/details/123163381
https://blog.csdn.net/qq_27517377/article/details/123166367

vue3 setup 父组件向子组件传递参数

  • 参数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <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>

  • 方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <script lang="ts" setup>
    import { ref,reactive} from 'vue'
     
    //子组件调用父组件的方法，
    //父组件的调用子组件的地方写上@onMySonFunc="fatherFunc"
    const myEmit = defineEmits(["onMySonFunc"])//这样就调用到父组件的fatherFunc方法了
     
    //传递参数： "调用父组件的方法"和666666
    myEmit("onMySonFunc","调用父组件的方法",666666)
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <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>

子组件向父组件传递数据,函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script lang="ts" setup>
import { ref,reactive} from 'vue'
 
const sonToFather = (yourParam:string)=>{
    console.log(yourParam+"子组件自定义的sonToFather()方发被执行了")
    return reactive({f:"篮球",g:"国足"})
}
//暴露参数出去,其他地方用onMounted接收
defineExpose({
    uid:"我是son.vue的defineExpose暴露的参数",
    name:"defineExpose 向父组件传递的参数",
    sonToFather//子组件暴露出去的方法
})
 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<!--传递父组件的fatherTitle参数到子组件,getFromMySons接收子组件的参数和方发-->
<Son :fatherTitle="xxxxx"  ref="getFromMySons"></Son>
</template>
 
<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import Son from "./son.vue"//引入子组件
 
 
//接收子组件传递过来的参数和方发
const getFromMySons = ref()//这个名字要跟上面子组件的ref="getFromMySons"名字一样
onMounted(()=>{//用onMounted接收子组件暴露的参数和方发
	console.log("onMounted接收子组件传递过来的参数")
	console.log(getFromMySons.value)
	console.log(getFromMySons.value.name,getFromMySons.value.uid)
	
    //执行子组件的方发
	console.log(getFromMySons.value.sonToFather("爸爸执行子组件的sonToFather方发->"))
})
</script>