一文看懂vue3中setup()和＜script setup＞＜script＞的区别_u013505589

网络 02-07 2146

setup ()

setup () 是vue3新增加的组件。vue3采用了组合式 API ，为了使用组合式API，我们需要一个入口，在vue3组件中，称之为setup。

(简单点来说，就是vue2里面的data，method，computed···全不要啦，所有数据方法全写在setup里)

来看一个简单的例子:

<template> <div class="box"> <h1 style="text-align: center;">{{testData}}</h1> </div> </template> <script> export default { setup () { const testData = 'hello world' return { testData } } } </script>

?注意：在setup()中定义的数据，方法都需要 return 返回出去，不然会报错

再看一个调用方法的例子:

<template> <div class="box" style="margin: 0 auto;text-align: center;"> <button @click="testFunciton">点我</button> </div> </template> <script> export default { setup () { const testFunciton = function () { console.log('你点了我'); } return { testFunciton } } } </script>

?如何双向绑定数据请阅读官网的ref,reactive,torefs 这里不详细讲解vue3的变化 (双向绑定，生命周期等)

setup () 函数应该有两个参数，props?和 contenxt 参数

第一个参数props:

props是一个对象，包含父组件传递给子组件的所有数据。

在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象

也就是说:如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接收配置。即props:{......}，如果你未通过Props进行接收配置，则输出的值是undefined

看例子:

// 父组件 <template> <div class="box" style="margin: 0 auto;text-align: center;"> <h1>我是父组件</h1> </div> <son :data="data"></son> </template> <script> import son from './son.vue' export default { components: { son }, setup () { const data = '父组件给子组件的数据' return { data } } } </script>

?父组件传递了一个字符串"父组件给子组件的数据"给子组件，来看一下子组件不设置props的

// 子组件不带props <template> <div> <h2>{{data}}</h2> </div> </template> <script> export default { name: 'son', setup (props) { console.log('props>>>', props.data); return { } } } </script>

?props接收到的是undefined，再来看一下子组件带props的

// 子组件带props <template> <div> <h2>{{data}}</h2> </div> </template> <script> export default { name: 'son', props:{ data:{ type:String } }, setup (props) { console.log('props>>>', props.data); return { } } } </script>

第二个参数context:

context也是一个对象，里面有attrs(获取当前标签上的所有属性的对象)，但是该属性是props中没有声明接收的所有的对象。如果你使用props去获取值，同时props中你声明了你要获取的值，则：获取的值是undefined

看例子:

// 父组件在子组件传递一个text <template> <div class="box" style="margin: 0 auto;text-align: center;"> <h1>我是父组件</h1> </div> <son :data="data" text="文本传输"></son> </template> <script> import son from './son.vue' export default { components: { son }, setup () { const data = '父组件给子组件的数据' return { data } } } </script> // 子组件 <template> <div> <h2>{{data}}</h2> </div> </template> <script> export default { name: 'son', props:{ data:{ type:String } }, setup (props, context) { console.log('props>>>', props.data); console.log('context>>>', context.attrs.text); return { } } } </script>

子组件通过 context.attrs 属性获取

attrs获取值是不需要props中没有声明接收，如果用attrs 接收 props 中的值会显示undefined

// 还是上面例子的数据，data是通过props传递的 console.log('contextTestProps>>>', context.attrs.data);

<script setup>?

更少的样板内容，更简洁的代码。能够使用纯 Typescript 声明 props 和抛出事件。更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)

?(定义太复杂，来看看对比传统的setup的优势)

1. 属性和方法不需要返回，直接用 <template> <div class="box" style="margin: 0 auto;text-align: center;"> <h1>{{data}}</h1> </div> </template> <script setup> const data = '语法糖真香' </script>

?2. 组件不需要components注册

?不需要从components注册使用，直接import就可以用了(香啊)

<template> <div class="box" style="margin: 0 auto;text-align: center;"> <h1>我是父组件</h1> <son></son> </div> </template> <script setup> import son from './son.vue' </script>

3.?组件数据传递 props 和 emit 语法改变?

在传统setup中，上面演示到 props需要用 setup(props)接收，而在setup语法糖里，语法不同

props?和?emits?在语法糖中使用?defineProps??和?defineEmits?方法来使用：

来看props的例子:

// 父组件 <template> <div class="box" style="margin: 0 auto;text-align: center;"> <h1>我是父组件</h1> <son :data="data"></son> </div> </template> <script setup> import son from './son.vue' const data = '传递给子组件' </script> // 子组件这回不需要props接收了 <template> <div> <h2>我是子组件---{{data}}</h2> </div> </template> <script setup> const props = defineProps ({ data: { type: String } }) console.log(props.data); </script>

?来看emits的例子:

// 子组件 <template> <div> <h2 @click="sendString">我是子组件点我给父组件传"hello"</h2> </div> </template> <script setup> const emits = defineEmits(['sendEmit']); const sendString = function () { emits('sendEmit', 'hello') } </script> // 父组件 <template> <div class="box" style="margin: 0 auto;text-align: center;"> <h1>我是父组件</h1> <son @sendEmit="sendEmit"></son> </div> </template> <script setup> import son from './son.vue' const sendEmit = function (s) { console.log(s); } </script>

?4.?对外暴露属性

看例子:

// 子组件 <template> <div> <h2>我是子组件</h2> </div> </template> <script setup> import { ref } from 'vue' let childText = ref('子组件数据') defineExpose({ childText, }); </script> // 父组件 <template> <div class="box" style="margin: 0 auto;text-align: center;"> <h1 @click="printChildrenText">我是父组件--点我打印子组件值</h1> <son ref="sontext"></son> </div> </template> <script setup> import son from './son.vue' import { ref } from 'vue' let sontext = ref(null) const printChildrenText = function () { console.log(sontext.value.childText); } </script>