vue3 setup 父组件向子组件传递参数、方法

子组件向父组件传递参数请看: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>

  • 19
    点赞
  • 56
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue3中,使用Composition API和setup()函数可以非常方便地编写组件逻辑。在组件中调用子组件方法,首先需要在两个组件的代码中分别定义和引入。 在子组件中,我们可以使用ref()函数定义一个响应式的属性或方法,并在template中通过组件名引用这个属性或方法,比如: ```html <template> <div> <button @click="sayHello">Say Hello</button> </div> </template> <script> import {ref} from 'vue'; export default { setup() { const greeting = ref('Hello'); const sayHello = () => { console.log(greeting.value); }; return {greeting, sayHello}; } } </script> ``` 在组件中,我们需要使用ref或reactive函数创建一个响应式对象,并在template中使用子组件时,通过v-bind将这个对象传递给子组件,比如: ```html <template> <div> <h2>{{message}}</h2> <child-component v-bind:greeting="greeting" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; import {ref} from 'vue'; export default { components: {ChildComponent}, setup() { const message = ref('Hello, Vue3!'); const greeting = ref(''); return {message, greeting}; } } </script> ``` 在子组件中,我们可以通过props来接收组件传递的响应式对象,并在方法中对其进行操作,比如: ```html <template> <div> <button @click="sayHello">Say Hello to Parent</button> </div> </template> <script> import {ref, defineProps} from 'vue'; export default { props: { greeting: { type: Object, default: () => ({}) } }, setup(props) { const sayHello = () => { console.log(props.greeting.value); }; return {sayHello}; } } </script> ``` 这里使用了defineProps函数来定义props,其参数为props的默认值和类型,这样可以让props的类型校验更加严格。 通过以上步骤,我们就可以在组件中调用子组件方法了。具体而言,我们可以在组件方法中,通过调用子组件的响应式对象来执行子组件中的方法,比如: ```html <template> <div> <h2>{{message}}</h2> <child-component v-bind:greeting="greeting" ref="childComponent" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; import {ref} from 'vue'; export default { components: {ChildComponent}, setup() { const message = ref('Hello, Vue3!'); const greeting = ref('Hi, Child Component!'); const childComponent = ref(null); const callChildMethod = () => { childComponent.value.sayHello(); }; return {message, greeting, childComponent, callChildMethod}; } } </script> ``` 在组件中,我们通过v-bind将组件中的greeting属性传递给子组件中的greeting属性,然后在组件的callChildMethod()方法中,通过ref()函数获取childComponent组件实例,并调用其sayHello()方法,从而实现了组件调用子组件方法的功能。 总之,在Vue3中,通过setup()函数和响应式对象,可以非常方便地编写组件逻辑,并实现组件调用子组件方法等复杂功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值