跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 工具系统 > 其他工具 > vue3-setup语法糖 - 父子组件之间的传值

vue3-setup语法糖 - 父子组件之间的传值

时间:2024-04-03 16:40:39 来源:网络cs 作者:往北 栏目:其他工具 阅读:

标签: 语法  父子 

近期学习 vue3 的父子组件之间的传值,发现跟vue2的并没有太大的区别,然后发现网络上很少基于setup语法糖的教程,我这边总结一下,希望对大家有所帮助。

一、父组件向子组件传值

父组件向子组件传值的时候,子组件是通过props来接收的,然后以变量的形式将props传递到setup语法糖果中使用(defineEmits的到来!)。如下图所示:

1、父组件传递方式

<template>  <div class="hello">  我是父组件  <!-- 父组件通过:变量(这里是info)绑定值 -->   <Child :info="parentMsg"></Child>  </div></template><script setup>import Child from './Child'import {ref} from 'vue'const parentMsg=ref('父组件传递值是a')</script><style scoped></style>

2、子组件接收方式和使用

<template><!-- info是父组件传递过了的值 -->  <div>我是子组件拿到了父组件的值是{{info}}</div></template><script setup>import { toRefs, defineProps } from 'vue'const props = defineProps({  //子组件接收父组件传递过来的值  info: String,})//使用父组件传递过来的值const {info} =toRefs(props)</script><style></style>

 3、效果图

 

 二、子组件向父组件传值

vue3中子组件向父组件传递值和vue2.x的区别是vue2.x使用的是 $emit 而vue3使用的是emit,它们的传值一样都是方法加值,即vue2.x的是this.$emit('方法名','传递的值(根据需要传或者不传)'),vue3的setup语法糖的是defineEmits。vue3的子传父方式如下所示: 

1、子组件的传递方式

<template>  <button @click="clickChild">点击子组件</button></template><script setup>import { defineEmits } from 'vue'// 使用defineEmits创建名称,接受一个数组const emit = defineEmits(['clickChild'])const clickChild=()=>{  let param={    content:'b'  }  //传递给父组件  emit('clickChild',param)}</script><style></style>

2、父组件接收与使用

<template>  <div class="hello">  我是父组件  <!-- clickChild是子组件绑定的事件,click是父组件接受方式 -->   <Child  @clickChild="clickEven"></Child> <p>子组件传递的值是 {{result}}</p> </div></template><script setup>import Child from './Child'import {ref} from 'vue'const result=ref('')const clickEven=(val)=>{  console.log(val);  result.value=val.content}</script><style scoped></style>

 3、效果图

 

三、父组件获取子组件中的属性值

当时用语法糖时,需要将组建的属性及方法通过defineExpose导出,父组件才能访问到数据,否则拿不到子组件的数据

1、子组件的传递方式

<template>  <div>        <h2> 我是子组件</h2>        <p>性别:{{ sex}}</p>    </div></template><script setup>import { reactive, ref,defineExpose } from "vue";let sex=ref('男')let info=reactive({    like:'王者荣耀',    age:18})defineExpose({sex, info})</script><style></style>

2、父组件显示方式

<template>  <div class="hello">  我是父组件   <Child ref="testcomRef"></Child><button @click="getSonHander">获取子组件中的数据</button> </div></template><script setup>import Child from './Child'import {ref} from 'vue'const testcomRef = ref()const getSonHander=()=>{  console.log('获取子组件中的性别', testcomRef.value.sex );    console.log('获取子组件中的其他信息', testcomRef.value.info )}</script><style scoped></style>

3、效果图

 

本文链接:https://www.kjpai.cn/news/2024-04-03/153418.html,文章来源:网络cs,作者:往北,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论