vue3 父子组件间相互传值方式

作者: adm 分类: 前端 发布时间: 2023-04-26

vue3父子组件相互传值

父向子传值

父组件只需在子组件上声明一个变量即可。 :代表变量,可以传变量;否则只能传常量

export default {
props:[‘pieData’],
setup(props,ctx) {
const pie_data = props.pieData
子组件中需要在props中声明需要接收的变量名,setup中需要引用props,赋值时用props.变量名接收。return出去就可以用了

子组件向父组件传值

const e_flag = ref(false);
const get_e_flag = (e) => {
e_flag.value = e;
};
父组件需要声明一个@方法get_e_flag接收子组件发送的值,在该方法中赋值给需要的变量

setup(props, ctx) {
……
const spyder_go = () => {
ctx.emit(‘e_flag’,e_flag.value)
子组件中需要在setup中使用ctx,使用ctx.emit向父组件传值。该方法需要调用,比如点击或者onMounted

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!