vue3:setup语法糖使用教程_vue.js

来源:脚本之家  责任编辑:小易  
目录
1.setup语法糖简介2.setup语法糖中新增的api2.1defineProps2.2defineEmits2.3defineExpose补充:与普通的script一起使用总结

1.setup语法糖简介

直接在script标签中添加setup属性就可以直接使用setup语法糖了。

使用setup语法糖后,不用写setup函数;组件只需要引入不需要注册;属性和方法也不需要再返回,可以直接在template模板中使用

	<template>
		<my-component @click="func" :numb="numb"></my-component>
	</template>
	<script lang="ts" setup>
		import {ref} from 'vue';
		import myComponent from '@/component/myComponent.vue';
		//此时注册的变量或方法可以直接在template中使用而不需要导出
		const numb = ref(0);
		let func = ()=>{
			numb.value++;
		}
	</script>

2.setup语法糖中新增的api

defineProps:子组件接收父组件中传来的propsdefineEmits:子组件调用父组件中的方法defineExpose:子组件暴露属性,可以在父组件中拿到

2.1defineProps

父组件代码

	<template>
		<my-component @click="func" :numb="numb"></my-component>
	</template>
	<script lang="ts" setup>
		import {ref} from 'vue';
		import myComponent from '@/components/myComponent.vue';
		const numb = ref(0);
		let func = ()=>{
			numb.value++;
		}
	</script>

子组件代码

	<template>
		<div>{{numb}}</div>
	</template>
	<script lang="ts" setup>
		import {defineProps} from 'vue';
		defineProps({
			numb:{
				type:Number,
				default:NaN
			}
		})
	</script>

2.2defineEmits

子组件代码

	<template>
		<div>{{numb}}</div>
		<button @click="onClickButton">数值加1</button>
	</template>
	<script lang="ts" setup>
		import {defineProps,defineEmits} from 'vue';
		defineProps({
			numb:{
				type:Number,
				default:NaN
			}
		})
		const emit = defineEmits(['addNumb']);
		const onClickButton = ()=>{
			//emit(父组件中的自定义方法,参数一,参数二,...)
			emit("addNumb");
		}
	</script>

父组件代码

	<template>
		<my-component @addNumb="func" :numb="numb"></my-component>
	</template>
	<script lang="ts" setup>
		import {ref} from 'vue';
		import myComponent from '@/components/myComponent.vue';
		const numb = ref(0);
		let func = ()=>{
			numb.value++;
		}
	</script>

2.3defineExpose

子组件代码

	<template>
		<div>子组件中的值{{numb}}</div>
		<button @click="onClickButton">数值加1</button>
	</template>
	<script lang="ts" setup>
		import {ref,defineExpose} from 'vue';
		let numb = ref(0);
		function onClickButton(){
			numb.value++;	
		}
		//暴露出子组件中的属性
		defineExpose({
			numb 
		})
	</script>

父组件代码

	<template>
		<my-comp ref="myComponent"></my-comp>
		<button @click="onClickButton">获取子组件中暴露的值</button>
	</template>
	<script lang="ts" setup>
		import {ref} from 'vue';
		import myComp from '@/components/myComponent.vue';
		//注册ref,获取组件
		const myComponent = ref();
		function onClickButton(){
			//在组件的value属性中获取暴露的值
			console.log(myComponent.value.numb)  //0
		}
		//注意:在生命周期中使用或事件中使用都可以获取到值,
		//但在setup中立即使用为undefined
		console.log(myComponent.value.numb)  //undefined
		const init = ()=>{
			console.log(myComponent.value.numb)  //undefined
		}
		init()
		onMounted(()=>{
			console.log(myComponent.value.numb)  //0
		})
	</script>

补充:与普通的script一起使用

<script setup>可以和普通的<script>一起使用。普通的<script>在有这些需要的情况下或许会被使用到。

无法在<script setup>声明的选项,例如inheritAttrs或通过插件启用的自定义的选声明命名导出运行副作用或者创建只需要执行一次的对象
<script>
? ? // 普通 <script>, 在模块范围下执行(只执行一次)
? ? runSideEffectOnce()
? ??
? ? // 声明额外的选项
? ? export default {
? ? ? inheritAttrs: false,
? ? ? customOptions: {}
? ? }
</script>

<script setup>
? ? // 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

总结

到此这篇关于vue3:setup语法糖使用的文章就介绍到这了,更多相关vue3:setup语法糖内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:vue3更新的setup语法糖实例详解一文搞懂Vue3.2中setup语法糖使用vue3?使用setup语法糖实现分类管理功能

  • 本文相关:
  • vue.js图片转base64上传图片并预览的实现方法
  • 浅谈vue 二级路由嵌套和二级路由高亮问题
  • vue微信h5生成二维码海报保存在本地相册的实现
  • vue的安装及element组件的安装方法
  • vue单页应用加百度统计代码(亲测有效)
  • antd中单个datepicker限定时间输入范围操作
  • 动态加载权限管理模块中的vue组件
  • 解析vue 2.5的diff算法
  • 使用vue+iview+.net core上传图片的方法示例
  • 详解vue-cli代理解决跨域问题
  • python列表推导
  • db.py在python项目中是什么意思
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库vue.jsvue3更新的setup语法糖实例详解一文搞懂vue3.2中setup语法糖使用vue3?使用setup语法糖实现分类管理功能vue.js图片转base64上传图片并预览的实现方法浅谈vue 二级路由嵌套和二级路由高亮问题vue微信h5生成二维码海报保存在本地相册的实现vue的安装及element组件的安装方法vue单页应用加百度统计代码(亲测有效)antd中单个datepicker限定时间输入范围操作动态加载权限管理模块中的vue组件解析vue 2.5的diff算法使用vue+iview+.net core上传图片的方法示例详解vue-cli代理解决跨域问题vue引用js文件的多种方式(推荐)vue跳转页面的几种方法(推荐)详解vue 路由跳转四种方式 (带参数)vue项目刷新当前页面的三种方法vue之父子组件间通信实例讲解(props、$ref、$emvue props用法详解(小结)vue.js中created方法作用element-ui中select组件绑定值改变,触发chavue实现文件上传功能简单理解vue中props属性详解vue整合axios的实例代码vue封装远程下拉框组件的实现示例详解如何实现在vue中导入excel文件利用vuex-persistedstate将vuex本地存储实现vuerouter导航守卫用法详解vue watch监听对象及对应值的变化详解vue打开子组件弹窗都刷新功能的实现vue组件tabbar使用方法详解vue3使用particles插件实现粒子背景的方法详解vue组件的写法汇总
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved