vue3中的setup方法

这篇具有很好参考价值的文章主要介绍了vue3中的setup方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、vue2中的定义变量和方法的写法

在介绍v3的setup之前,我们先来看看在v2中是如何定义变量和方法的

<template>
	<h2>姓名:{{name}}</h2>
	<h2>年龄:{{age}}</h2>
	<button @click="sayHello">说话</button>
</template>

<script>
	export default {
		name: 'App',
        data() {
			return {
                name:'张三',
				age:'男',
			}
		},
		methods: {
			sayHello(){
				alert( `你好,我是${this.name}${this.age}岁,很高兴认识你!`)
			},
		},
	}
</script>


vue3中的setup方法,vue3从入门到精通,javascript,vue.js,前端
如上面的示例,在v2中我们定义变量要写在data方法中,方法要写在methods中

二、setup简单用法介绍

那么我们用v3中的setup同样完成上面案例,如下:

<template>
	<h2>姓名:{{name}}</h2>
	<h2>年龄:{{age}}</h2>
	<button @click="sayHello">说话</button>
</template>

<script>
	export default {
		name: 'App',
		//此处只是测试一下setup,暂时不考虑响应式的问题。
		setup(){
			//数据
			let name = '张三'
			let age = 18

			//方法
			function sayHello(){
				alert(`你好,我是${name}${age}岁,很高兴认识你!`)
			}

			//返回一个对象(常用)
			return {
				name,
				age,
				sayHello,
			}
		}
	}
</script>


vue3中的setup方法,vue3从入门到精通,javascript,vue.js,前端
可以看到,我们只需在setup方法中定义变量和函数,最后通过return将变量和函数暴露出去就可以在template模版中使用了。

就单从写法上而言,是不是感觉v3比v2更简洁呢。v3具有更好的开发体验。

三、setup函数详解

在Vue 3中,setup函数是一个新引入的特殊函数,用于配置组件的使用。

1. setup函数的执行时机

它是组件实例创建之前第一个被执行的函数它还在beforeCreate钩子函数之前被调用

如下示例:

<template>
</template>

<script>
  export default {
    beforeCreate() {
      console.log('beforeCreate');
    },
    setup() {
      console.log('setup函数被调用');
    }
  }
  
</script>

vue3中的setup方法,vue3从入门到精通,javascript,vue.js,前端

2.setup函数具有两个参数:props和context。

我们先定义两个组件,一个父组件,一个子组件

  • 子组件TestSetup
<template>
	<h2>姓名:{{person.name}}</h2>
	<h2>年龄:{{person.age}}</h2>
	<button @click="test">测试触发一下Demo组件的Hello事件</button>
</template>

<script>
	import {reactive} from 'vue'
	export default {
		name: 'Demo',
		setup(props,context){
			console.log('---setup---props',props)
			console.log('---setup---',context)
			//数据
			let person = reactive({
				name:'张三',
				age:18
			})

			//方法
			function test(){
				context.emit('hello',666)
			}

			//返回一个对象(常用)
			return {
				person,
				test
			}
		}
	}
</script>


  • 父组件App.vue
<template>
	<test-setup @hello="showHelloMsg" msg="你好啊" hobby="篮球">
		<template v-slot:qwe>
			<span>插槽qwe</span>
		</template>
		<template v-slot:asd>
			<span>插槽asd</span>
		</template>
	</test-setup>
</template>

<script>
	import TestSetup from './components/TestSetup'
	export default {
		name: 'App',
		components:{TestSetup},
		setup(){
			function showHelloMsg(value){
				alert(`你好啊,你触发了hello事件,我收到的参数是:${value}`)
			}
			return {
				showHelloMsg
			}
		}
	}  
</script>


  1. props参数:它是一个响应式的对象,包含了组件接收的所有属性。可以通过解构或直接使用props对象来访问这些属性。

请注意如果你解构了 props 对象解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。

如果你确实需要解构 props 对象,或者需要将某个 prop 传到一个外部函数中并保持响应性,那么你可以使用 toRefs() 和 toRef() 这两个工具函数:

举例说明:
在上面的父组件中我们传了msg、和hobby两个属性给子组件,这时我们就可以通过setup的props来接收

props:['msg', 'hobby'],
setup(props) {
  const { msg, hobby } = toRefs(props); // 解构属性
  console.log(msg.value); // 直接访问单个属性值
}

打印结果如下:
vue3中的setup方法,vue3从入门到精通,javascript,vue.js,前端

  1. context参数:它是一个普通的对象,包含与当前组件有关的一些信息和方法。其中最常用的是attrsemitslots
  • attrs:一个非响应式的对象,包含了未声明为props的所有属性。

举例说明:

props:['msg'],
setup(_, context) {
  console.log('---setup---',context.attrs.hobby) //访问未声明的属性 相当与Vue2中的$attrs
}

vue3中的setup方法,vue3从入门到精通,javascript,vue.js,前端

  • emit:用于触发父组件中定义的事件,与Vue 2中的$emit类似。

举例说明:
子组件中context.emit('hello',666)向父组件触发一个方法hello,并将666作为参数传递过去

<template>
	<button @click="test">测试触发一下Demo组件的Hello事件</button>
</template>

<script>
	import {reactive} from 'vue'
	export default {
		emits:['hello'],
		setup(props,context){
			let person = reactive({
				name:'张三',
				age:18
			})

			//方法
			function test(){
				context.emit('hello',666)
			}

			//返回一个对象(常用)
			return {
				person,
				test
			}
		}
	}
  • 父组件App.vue,通过showHelloMsg方法接收
<template>
	<test-setup @hello="showHelloMsg" msg="你好啊" hobby="篮球">
	</test-setup>
</template>

<script>
	import TestSetup from './components/TestSetup'
	export default {
		name: 'App',
		components:{TestSetup},
		setup(){
			function showHelloMsg(value){
				alert(`你好啊,你触发了hello事件,我收到的参数是:${value}`)
			}
			return {
				showHelloMsg
			}
		}
	}  
</script>


vue3中的setup方法,vue3从入门到精通,javascript,vue.js,前端

  • slots:用于访问插槽内容。在Vue 2中,插槽内容是通过this.$slots访问的,而在Vue 3中,需要使用context.slots

举例说明:
父组件中传递两个插槽

<template>
	<test-setup>
		<template v-slot:qwe>
			<span>插槽qwe</span>
		</template>
		<template v-slot:asd>
			<span>插槽asd</span>
		</template>
	</test-setup>
</template>

子组件中访问

setup(_, context) {
  console.log('---setup---slots',context.slots) //插槽
}

vue3中的setup方法,vue3从入门到精通,javascript,vue.js,前端

综上所述,setup函数是Vue 3中用于配置组件使用的特殊函数,它可以接收propscontext作为参数,并且通过这些参数提供了访问组件属性、上下文相关信息和方法的能力。文章来源地址https://www.toymoban.com/news/detail-528039.html

到了这里,关于vue3中的setup方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 setup语法糖 使用组件内的路由守卫beforeRouteEnter使用方法

    由于beforeRouteEnter在setup语法糖中是无法使用的,所以需要再起一个script标签 使用defineComponent方式来使用就可以了

    2024年02月11日
    浏览(54)
  • Vue3从入门到精通(二)

    在Vue3中,侦听器的使用方式与Vue2相同,可以使用 watch 选项或 $watch 方法来创建侦听器。不同之处在于,Vue3中取消了 immediate 选项,同时提供了新的选项和API。 创建侦听器 可以使用 watch 选项或 $watch 方法来创建侦听器,语法与Vue2相同。示例如下: 上面的代码中,使用 watch

    2024年02月08日
    浏览(32)
  • Vue3从入门到精通(一)

    Vue3是Vue.js的最新版本,于2020年9月18日正式发布。Vue3相比Vue2有很多改进和优化,包括但不限于: 更快的渲染速度:Vue3通过使用Proxy代理对象和优化虚拟DOM算法等方式,提高了渲染性能。 更小的体积:Vue3的体积比Vue2更小,打包后的文件更小,加载速度更快。 更好的类型支持

    2024年02月08日
    浏览(32)
  • Vue3从入门到精通(三)

    在 Vue3 中,插槽(Slots)的使用方式与 Vue2 中基本相同,但有一些细微的差异。以下是在 Vue3 中使用插槽的示例: 在上面的示例中, ChildComponent 组件定义了一个默认插槽,使用 slot/slot 标签来表示插槽的位置。在 ParentComponent 组件中,使用 ChildComponent 标签包裹了一段内容 pT

    2024年02月11日
    浏览(31)
  • JavaScript从入门到精通系列第二十七篇:详解JavaScript中的包装类

      文章目录 前言 一:包装类 1:包装类作用 2:包装类成员 3:包装类作用 4:包装类使用         包装类就类似于把一个草根包装成一个明星,就类似于Java中的Integer。         JavaScript中的基本数据类型String Number Boolean Null Undefined         引用数据类型:Object         J

    2024年02月06日
    浏览(42)
  • JavaScript系列从入门到精通系列第十七篇:JavaScript中的全局作用域

    文章目录 前言 1:什么叫作用域 一:全局作用域 1:全局变量的声明 2:变量声明和使用的顺序 3:方法声明和使用的顺序         可以起作用的范围         我们的作用域只有全局作用域和函数作用域。          直接编写到Script里边的代码,就是全局作用域。全局作用域

    2024年02月06日
    浏览(42)
  • vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    目录 setup函数 props参数 案例 第一种写法(用setup函数的方式):  第二种方法(语法糖形式即setup写入script标签中)也可以传值,  context (attrs,emit,slots) vue3中的双向数据绑定自定义事件emit和v-model emit自定义事件 v-model 有两个参数分别是 props,context 即 props参数是一个 对象 ,

    2024年02月10日
    浏览(42)
  • vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

    Cascader 级联选择器 | Element Plus 官方文档里提到可以清空选中节点,使用 clearCheckedNodes()方法:   具体用法: 1 先了解vue3 setup中怎么获取ref 获取方法非常简单,在需要获取的组件里写ref,在setup里定义同名空ref,就会自动获取了 定义ref: 在setup里定义同名空ref: 然后操作mu

    2024年02月12日
    浏览(41)
  • 关于 vue3运行报错Internal server error: [@vue/compiler-sfc] <script setup> cannot contain ES 的处理方法

    大致的意思就是 script setup  不能使用ES模块导出 其实问题就出在,给官方给出的方法混用了 一种是: script  标签里面配置  setup 另一种是: export default  类里配置  setup()  方法 两者用一种就行了 第一种  第二种

    2024年02月07日
    浏览(43)
  • JavaScript系列从入门到精通系列第二十篇:使用工厂方法创建JavaScript对象,JavaScript构造函数详解,JavaScript类概念的介绍

    文章目录 一:使用工厂方法创建对象 1:原始写法 2:工厂方式 3:结果验证  二:构造函数 1:什么是构造函数 2:构造函数和普通函数的区别 3:构造函数的执行流程 三:类 1:什么是类 2:如何检查一个对象是否是个类的实例 3:Object的地位 四:构造函数修改 1:重大问题

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包