父组件使用子组件，并向子组件中传值和方法
html:
使用 v-bind即 :xxx="变量/方法"向子组件传递值或者方法,下面定义变量id和变量setIds，将searchForm.id的值和setIds方法传到子组件中去
<template>
<ExpertsConfiguration
:id="searchForm.id"
:setIds="setIds"
></ExpertsConfiguration>
</template>
js:
import { ref,reactive,onMounted,onBeforeUnmount } from 'vue';
import ExpertsConfiguration from "../ExpertsConfiguration/ExpertsConfiguration.vue" //引用子组件
export default {
name: "GetMyTaskWaitingPageList",
setup() {
let searchForm = reactive({
id: 1,
})
const setIds= () => {
searchForm.id = 666
}
onMounted(() => {})
return {
searchForm ,
setIds
}
},
components: {
ExpertsConfiguration,
}
}
子组件接收父组件的值以及调用父组件的方法
js:
先通过props进行接收父组件传来的值，然后再在setup里面使用第一个参数props，可以拿到父组件所有的变量以及方法文章来源：https://www.toymoban.com/news/detail-584442.html
import { ref,reactive,onMounted,onBeforeUnmount } from 'vue';
export default {
nname: "ExpertsConfiguration",
setup(props, context) {
//接收父组件传来的id
let listId = ref("");
listId.value = props.id
const getIds= () => {
//props可以拿到父组件所有的变量以及方法
if(props.setIds){
props.setIds();//直接调用父组件方法即可
}
}
onMounted(() => {})
return {
listId,
getIds
}
},
props: { //接收子组件传值
id: Number | String,
setIds: {
type: Function,
default: null
}
},
components: {}
}
html:文章来源地址https://www.toymoban.com/news/detail-584442.html
<template>
<div>
{{listId}}
<a-button type="primary" @click="getIds">点击</a-button>
</div>
</template>
到了这里，关于vue3.0子组件接收父组件的值以及调用父组件的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
