目录
变量声明
变量声明定义的时候,不需要返回可以直接使用即可
没有使用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>