vue中setup语法糖写法实例
作者：是张鱼小丸子鸭
如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup语法糖的相关资料,需要的朋友可以参考下
变量声明
变量声明定义的时候，不需要返回可以直接使用即可
没有使用setup语法糖时写法
<script>
import {useStore} from 'vuex'
export default {
setup() {
const store=useStore()
const plus=()=>{
store.commit('plus')
}
return {plus}
},
}
</script>使用setup语法糖写法
<script setup>
import { reactive, ref, toRefs } from "vue";
let num = ref(100);
const plus = ()=>{
num.value++;
}
let {name,age} = toRefs(reactive({
name:"张三",
age:20,
}));
</script>toRefs解析reactive数据，可以通过解构赋值进行数据获取
在setup中使用toRefs来解析对象，在非setup中使用...toRefs（）方法来解析，这也是一个区别
setup语法糖组件只需要导入，不需要注册组件
<template>
<div>
{{name}}--{{age}}
<el-button @click="plus">Plus</el-button>
<son/>
</div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import son from "../components/Son.vue"
let num = ref(100);
const plus = ()=>{
num.value++;
}
let {name,age} = toRefs(reactive({
name:"张三",
age:20,
}));
</script>在非setup语法糖中我们需要使用components来注册子组件
setup语法糖中父子组件通信也发生了变化，使用defineProps和defineEmits来进行父子组件通信
父传子
父组件
<template>
<div>
{{name}}--{{age}}
<Son :num="age" :name='name' />
</div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import Son from "./Son.vue"
let {name,age} = toRefs(reactive({
name:"张三",
age:20,
}));
</script>子组件
<template>
<div>
<h3>Son子组件--{{num}}--{{name}}</h3>
</div>
</template>
<script setup>
import { ref,defineEmits } from "vue"
defineProps({
num:{
type:Number,
},
name:{
type:String,
}
})
</script>子传父
父组件
<template>
<div>
<Son @plus="plus"/>
</div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import Son from "./Son.vue"
let num = ref(100);
const plus = ()=>{
num.value++;
}
</script>子组件
<template>
<div>
<button @click="add">点我</button>
</div>
</template>
<script setup>
import { ref,defineEmits } from "vue"
const num=ref(1)
const emits = defineEmits(['num'])//定义号要子传父
const add=()=>{
emits('plus',num.value)
}
</script>到此这篇关于vue中setup语法糖写法实例的文章就介绍到这了,更多相关vue setup语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！