Vue3组合式apiscript setup提案使用emitprop组件通信
Vue3组合式apiscript setup提案使用emitprop组件通信
用户6256742
发布于 2022-07-06 14:38:43
发布于 2022-07-06 14:38:43
在Vue3组合式api开发中，所有模板中使用的变量都需要return暴露模板，这样会给开发者增加很多心智负担，所以又有了提案script setup
之前：
<template>
{{mes}}
</template>
<script>
import {ref} from 'vue'
export default {
setup() {
let mes=ref('我是加载信息')
}
}
</script>提案：
<template>
{{ mes }}
</template>
<script setup="prop,{emit}">
import {ref} from 'vue'
let mes=ref('我是加载信息')
emit(函数命，参数)//子传父
console.log(prop.名字);//获取父组件的传值
</script>但是在我开发中使用发现变量名字无需return，但是props和ctx参数无法使用，还报出了一些错误
发现相关报错信息狗，去推特询问作者了尤雨溪，并且得到了回复：
简单的看就是我使用的方法过时了，不在使用，在去GitHub察看最新方案后，整理出：
<template>
{{mes}}
<组件></组件>
</template>
<script setup>
import {defineEmit, defineProps, ref} from 'vue'
import 组件 from '@/components/组件名字'
let mes=ref('我是文字消息');
let emit=defineEmit();
emit('函数名字',参数)//子>父
let prop=defineProps({
name:type
})
console.log(prop.name);//获取父组件的值
</script>变化：
- prop，emit等参数需要引入（推荐使用vscode函数内使用会直接帮助您引入）
- 组件不在components需要定义只需引入
- 双向绑定变量不在需要return全部暴露模板
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读