1.vue3中template支持多個根標(biāo)簽
2.main.js
3.setup（取代data methods） ref
4.v-model在組件中的運(yùn)用
5.新組件 Teleport

template支持多個根標(biāo)簽

雖然，但是
在用ant-design-vue搭的架子中，如果使用了多個根標(biāo)簽，跳轉(zhuǎn)頁面之后會出現(xiàn)白板，重新刷新頁面之后才正常顯示。（也不知道是哪的問題，就。。還是用一個根標(biāo)簽吧。

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函數(shù)返回一個對象，這個對象中包含方法和數(shù)據(jù)，生命周期鉤子函數(shù)也在setup中運(yùn)行，取代的是vue2中的data，methods。
ref類型的數(shù)據(jù)，是一種響應(yīng)式的數(shù)據(jù),待續(xù)

//setup函數(shù)有兩個參數(shù)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在組件中的運(yùn)用

vue2組件通信

//子組件
<template>
  <div>
   <p v-if="pVisible">
      For a guide and recipes on how to configure / customize this project      
   </p>
   <div @click="control">切換p標(biāo)簽顯示</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標(biāo)簽顯示</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>

相當(dāng)于子組件中的pVisible與父組件中的isVisible雙向綁定了，比vue2傳統(tǒng)方法簡化很多。

Teleport
有兩個div分別是box1和box2，據(jù)經(jīng)驗(yàn)所知，即使box1的孩子el1的z-index為10，el1的層級也沒有box2高，一些情況下el1也會被box2遮?。ㄒ?yàn)榧词筫l1的層級再高，也是在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>

//待更新。。。