Vue3.2（setup语法糖）父子组件【传值】和【传方法】的使用

晚睡要秃头

已于 2022-12-02 11:55:31 修改

阅读量1.1k

点赞数

文章标签： javascript 前端框架 vue vue.js

于 2022-11-14 18:02:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44971635/article/details/127852235

版权

本文介绍了在Vue中如何实现父组件向子组件传递值和方法，以及子组件如何接收这些值并调用父组件的方法。Father.vue组件通过props向Child.vue传递`text`值和`UseAssentment`方法，子组件则通过定义`HandlerOk`和`HandlerNo`函数来响应按钮点击，并使用`emit`触发父组件的更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、父组件向子组件传值、传方法

Father.vue的组件

<template>
  <div>
    <Child @update="UseAssentment" :value="text" />
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, onMounted } from "vue";
import Child from "@/view/Child.vue";

function UseVal() {
  const text = ref("");
  const treeData = ref([])
  const UseAssentment = async () => {
    const {data,code} = await $htttp.get('/user/userinfo')
    treeData.value = data;
  };
  return { text, UseAssentment };
}
const { text, UseAssentment } = UseVal();
</script>

二、子组件接收父组件的值并调用父组件的方法

Child.vue的组件

 <template>
  <div>
    <Button @click="HandlerOk">取消</Button>
    <Button @click="HandlerNo">确认</Button>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, onMounted } from "vue";
const props = defineProps({
  value: {
    type: String,
    default: {},
  },
});
const emits = defineEmits("update");
function UseHandler() {
  const HandlerOk = () => {
    console.log(props.value);
    emits("update");
  };
  const HandlerNo = () => {
    emits("update");
  };
  return { HandlerOk, HandlerNo };
}
const { HandlerOk, HandlerNo } = UseHandler();
</script>