1.vue3中template支持多個根標簽
2.main.js
3.setup（取代data methods） ref
4.v-model在組件中的運用
5.新組件 Teleport
template支持多個根標簽
雖然睹耐，但是
在用ant-design-vue搭的架子中源武，如果使用了多個根標簽，跳轉頁面之后會出現白板箫章，重新刷新頁面之后才正常顯示。（也不知道是哪的問題曼氛，就桐款。。還是用一個根標簽吧痒蓬。
main.js
//vue3
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
//vue2
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
createApp(組件)與new Vue({template,render})
setup ref
setup函數返回一個對象，這個對象中包含方法和數據滴劲，生命周期鉤子函數也在setup中運行攻晒，取代的是vue2中的data，methods班挖。
ref類型的數據鲁捏，是一種響應式的數據,待續(xù)
//setup函數有兩個參數props和context
export default{
props:{
title: String
},
setup(props, context) {
console.log(props.title)
// Attributes (Non-reactive object)
console.log(context.attrs)
// Slots (Non-reactive object)
console.log(context.slots)
// Emit Events (Method)
console.log(context.emit)
}
}
// Vue2
export default{
props:{
title: String
},
data() {
return {
count: 0
},
methods:{
add(){
return this.count++
}
}
}
}
// Vue3
export default {
props: {
title: String
},
setup(props,context) {
const count = ref(0)
add(){
return count.value ++
}
return {count,add}
}
}
v-model在組件中的運用
vue2組件通信
//子組件
<template>
<div>
<p v-if="pVisible">
For a guide and recipes on how to configure / customize this project
</p>
<div @click="control">切換p標簽顯示</div>
</div>
<template>
<script>
export default {
name: 'children',
props: {
pVisible:Boolean
},
methods: {
control(){
this.$emit('control',!this.pVisible)
}
},
}
</script>
//父組件
<template>
<div >
<children :pVisible="isVisible" @control="abc"/>//@control="isVisible=$event"這樣也可
</div>
</template>
<script>
import children from './components/children.vue'
export default {
name: 'Father',
data() {
return {
isVisible:true
}
},
components: {children},
methods: {
abc($event){
this.isVisible=$event
}
},
}
</script>
vue3使用v-model組件通信
//子組件
<template>
<p v-if="pVisible">
For a guide and recipes on how to configure / customize this project
</p>
<div @click="control">切換p標簽顯示</div>
<template>
<script>
export default {
name: 'children',
props: {
pVisible:Boolean
},
setup(props,context){
const control=()=>{
context.emit('update: pVisible',!props.pVisible)
}
return{control}
}
}
</script>
//父組件
<template>
<div >
<children v-model:pVisible="isVisible" />
</div>
</template>
<script>
import { ref } from 'vue'
import children from './components/children.vue'
export default {
name: 'Father',
components: {children},
setup(){
const isVisible=ref(true)
return{isVisible}
},
}
</script>
相當于子組件中的pVisible與父組件中的isVisible雙向綁定了，比vue2傳統(tǒng)方法簡化很多萧芙。
Teleport
有兩個div分別是box1和box2给梅，據經驗所知，即使box1的孩子el1的z-index為10末购，el1的層級也沒有box2高破喻，一些情況下el1也會被box2遮住（因為即使el1的層級再高盟榴，也是在box1的層級下生存）曹质，這時候就可以用teleport組件包住el1，使其脫離box1層級的掌控,to表示重新找的爸爸
<div class="box1" style="position:relative z-index:2">
<div class="el1" style="position:absolte z-index:10"></div>
</div>
<div class="box2" style="position:relative z-index:3"></div>
//Teleport
<div class="box1" style="position:relative z-index:2">
<Teleport to="body">
<div class="el1" style="position:absolte z-index:10"></div>
</Teleport>
</div>T
<div class="box2" style="position:relative z-index:3"></div>
//待更新擎场。羽德。。
