近期学习 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、效果图
文章来源地址https://www.toymoban.com/news/detail-513304.html
二、子组件向父组件传值
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.toymoban.com/news/detail-513304.html
到了这里,关于vue3-setup语法糖 - 父子组件之间的传值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!