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类型的数据，是一种响应式的数据,待续
//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传统方法简化很多。
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>
//待更新。。。
