Vue3组件间通信——父子传值、方法调用

Vue3组件间关系

实际业务开发过程中，一定会用到组件间通信，如父子组件通信、兄弟组件通信、爷孙组件通信，还有一些全局通信的场景

组件间关系可见下图：

本篇主要详解父子组件通信

在这里插入图片描述

父子组件传值常用方式

父子组件传值是开发过程中使用最多也是必掌握的方式具体可以分为以下三种：

1.props/emits方式
2.v-model/emits方式
3.ref/emits方式

1.props/emits方式

父传子

父组件中引入子组件，然后在子组件上绑定需要传给子组件的值

子组件通过props接收,

const props = defineProps<{
    index: string
    uid: number
  }>()

子组件使用接收的值

const {index,uid}=toRefs(props)

子传父

子组件定义emits，通过给子组件绑定一个事件触发emits：

const emits = defineEmits(['toParent'])
const selectChange = (id: number) => {
  emits('toParent', id)
}

父组件通过getChilderVal接收：

const getChilderVal=(id:number)=>{
console.log(id)
}

2.v-model/emits方式

对比 props / emits ，这个方式更为简单：

在 Father.vue ，通过 v-model 向 Child.vue 传值
Child.vue 通过自身设定的 emits 向 Father.vue 通知数据更新

父传子

父组件直接通过v-model传值给子组件:

子组件同理通过props接收：

const props = defineProps<{
    userName: string
  }>()

子传父

子组件通过”update”字段即可：

const emits = defineEmits(['update:userName'])
emits('update:userName')

3. ref/emits方式

ref 是可以用在 DOM 元素与子组件上面，所以，父组件也可以直接通过对子组件绑定 ref 属性，然后通过 ref 变量去操作子组件的数据或者调用里面的方法

父传子

比如导入了一个 Child.vue 作为子组件，需要在 template 处给子组件标签绑定 ref：

子组件：

父组件：

给子组件定义一个ref变量

    const child = ref(null);

 // 执行子组件里面的ajax函数
    child.value.getList();

// 打开子组件里面的弹窗
    child.value.isShowDialog = true;

子传父

子组件如果想主动向父组件通讯，也需要使用 emit，此处就不再重复讲解

父子组件方法相互调用

子组件调用父组件中方法

父组件：

  
    
  


import child from "@/components/child";

const parentHandler=()=>{
  console.log("这是父组件的方法");
}

子组件：

  
    
  



const props = defineProps<{
    parentHandler: Function
  }>()
};
//使用
props.parentHandler()

父组件调用子组件中方法

父组件：

  
    
    
      点我调用Son组件里的方法
    
  



import Son from "../components/Son.vue";
    const RefChilde = ref();     //RefChilde 要和Son组件上的class名相同
    const fnCallChild = () => {
      RefChilde.value.sonFn();      //sonFn是子组件里的方法
    };

子组件：

  
    {{ conts }}
  



    const conts = ref("我是子组件");
    const sonFn = () => {
      conts.value = "我被父组件里调用了子组件的方法修改了数据";
    };

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/ecffadc325.html

Vue3组件间通信——父子传值、方法调用

Vue3组件间关系

父子组件传值常用方式

1.props/emits方式

父传子

子传父

2.v-model/emits方式

父传子

子传父

3. ref/emits方式

父传子

子传父

父子组件方法相互调用

子组件调用父组件中方法

父组件调用子组件中方法

{{ conts }}

相关推荐