原文地址
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> 其实是使用组合式 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的例子:
javascript
// 子组件
<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>
``
