因為setup的解析在其他元件選項之前, 所以setup中"this"並不是元件例項, 之前通過"this"獲取的屬性現在都要從setup的引數中獲取, 比如"props/emit".
props
setup的第一個引數是props.
<!--App.vue-->
<Test :number="100"/><!--Test.vue-->
<template>
<p>{{number}} </p>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: 'Test',
props:{
number:{
type:Number
}
},
setup(props){
console.log(props.value); // 100
}
});emit
setup的第二個引數是個物件, 包含"attrs/slots/emit/expose", 這裡包含4個屬性, 但是這裡我們只講emit, 其他3個在業務程式碼開發中並不常用, 本課的出發點是幫助大家快速上手開發, 所以關於他們的內容大家暫時可以自行官網瞭解, 再本系列課程完畢後,我也會出一版進階的教程提供給大家.
<!--Child.vue, 子元件-->
<template>
<p>{{number}} </p>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: 'Child',
props:{
number:{
type:Number,
}
},
setup(props,{emit}){
// 模擬介面請求
setTimeout(()=>{
emit('update:number',props.number+100);
})
}
});<!--Parent.vue, 父元件-->
<template>
<Child v-model:number="n"/>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Child from './SetupParams/Child.vue'
export default defineComponent({
name: "Parent",
components:{Child},
data(){
return {n:99};
},
});
</script>
上面我們實現了setup模式下的"v-model".
微信群
感謝大家的閱讀, 如有疑問可以加我微信, 我拉你進入微信群(由於騰訊對微信群的100人限制, 超過100人後必須由群成員拉入)
