vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解
作者:Jocelyn_书 时间:2024-04-27 16:01:39
vue3官方文档
defineProps
和defineEmits
都是只能在<script setup>
中使用的编译器宏。他们不需要导入,且会随着<script setup>
的处理过程一同被编译掉。defineProps
接收与props
选项相同的值,defineEmits
接收与emits
选项相同的值。
父传子 - defineProps
父组件
<template>
<div class="Father">
<p>我是父组件</p>
<!-- -->
<son :ftext="ftext"></son>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Son from './son.vue'
const ftext = ref('我是父组件-text')
</script>
子组件
<template>
<div class="Son">
<p>我是子组件</p>
<!-- 展示来自父组件的值 -->
<p>接收到的值:{{ftext}}</p>
</div>
</template>
<script setup>
import {ref} from 'vue'
// setup 语法糖写法
//defineProps 来接收组件的传值
const props = defineProps({
ftext: {
type:String
},
})
</script>
子传父 - defineEmits
子组件:
<template>
<div class="Son">
<p>我是子组件</p>
<button @click="toValue">点击给父组件传值</button>
</div>
</template>
<script setup>
import {ref} from 'vue'
// setup 语法糖写法
//用defineEmits()来定义子组件要抛出的方法,语法defineEmits(['要抛出的方法'])
const emit = defineEmits(['exposeData'])
const stext = ref('我是子组件的值-ftext')
const toValue = ()=>{
emit('exposeData',stext)
}
</script>
父组件:
<template>
<div class="Father">
<p>我是父组件</p>
<!-- -->
<son @exposeData="getData" :ftext="ftext"></son>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Son from './son.vue'
const ftext = ref('我是父组件-text')
const getData = (val)=>{
console.log("接收子组件的值",val)
}
</script>
defineExpose
官方解释:
使用 <script setup>
的组件是默认关闭的(即通过模板引用或者 $parent
链获取到的组件的公开实例,不会暴露任何在 <script setup>
中声明的绑定)。
可以通过 defineExpose
编译器宏来显式指定在 <script setup>
组件中要暴露出去的属性
子组件:
<template>
<div>
<p>我是子组件</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const stext = ref('我是子组件的值')
const sfunction = ()=>{
console.log("我是子组件的方法")
}
defineExpose({
stext,
sfunction
})
</script>
父组件:
<template>
<div class="todo-container">
<p>我是父组件</p>
<son ref="sonDom"></son>
<button @click="getSonDom">点击</button>
</div>
</template>
<script setup>
import { ref ,nextTick} from 'vue';
import son from './components/son.vue'
const sonDom = ref(null) //注意这里的命名要和ref上面的命名一致
const getSonDom = ()=>{
console.log("sonDom",sonDom.value)
}
//直接打印sonDom的值是拿不到的,子组件节点还没生成
nextTick(()=>{
console.log("sonDom",sonDom.value)
})
</script>
来源:https://blog.csdn.net/weixin_42307283/article/details/128716120
标签:vue3,setup,组件传参
0
投稿
猜你喜欢
基于python判断字符串括号是否闭合{}[]()
2022-03-25 15:58:45
go micro集成链路跟踪的方法和中间件原理解析
2024-04-26 17:29:59
Python如何实现自带HTTP文件传输服务
2023-01-05 05:04:15
textarea 在IE和FF下换行无法正常显示的解决方法
2022-09-11 01:33:40
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021-07-28 23:33:51
MySQL中表分区技术详细解析
2024-01-21 01:01:11
Django 开发调试工具 Django-debug-toolbar使用详解
2022-03-18 02:31:07
Python计算字符宽度的方法
2021-02-13 20:25:28
用Python遍历C盘dll文件的方法
2023-04-27 20:15:27
python错误处理详解
2023-04-24 11:10:30
Vue动态组件component标签的用法大全
2024-05-29 22:28:33
MySQL查询两个日期之间记录的方法
2024-01-21 19:47:40
vue设置路由title,但刷新页面时title失效的解决
2024-04-27 15:52:10
使用python根据端口号关闭进程的方法
2022-12-26 01:58:41
Python中序列的修改、散列与切片详解
2022-10-27 14:47:58
Go语言转换所有字符串为大写或者小写的方法
2023-06-21 19:48:07
几个你不知道的技巧助你写出更优雅的vue.js代码
2024-05-13 09:14:39
python爬虫自动创建文件夹的功能
2023-11-05 08:22:40
javascript弹出窗口总结
2009-08-21 12:40:00
Golang Gin 中间件 Next()方法示例详解
2024-02-20 07:29:22