一文看懂vue3中setup()和 <script setup><script>的区别

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> 

<script setup> 其实是使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法,它具有更多优势:

  • 更少的样板内容,更简洁的代码。
  • 能够使用纯 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. 对外暴露属性

<script setup> 对外暴露属性需要使用defineExpose, 不需要导入 直接使用

看例子:

// 子组件
<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>

 

  • 74
    点赞
  • 158
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值