堅持、堅持、再堅持！
努力、努力、再努力！
今天把Vue3更完
關鍵字：父子組件傳值、
1. 父子組件傳值
父
<Son1 :name="name" :age="age" :sex="sex"
@updateName="name=$event" @updateAge="age=$event" @updateSex="sex=$event">
<!-- 通過template組件指定具體的插槽 -->
<template v-slot:one>
<div>
<button>按鈕1</button>
</div>
<p>HelloWorld</p>
</template>
<!-- #是v-slot:的簡寫 -->
<template #two>
<div>
<button>按鈕2</button>
</div>
<p>你好世界</p>
</template>
</Son1>
子
<h2>Son1</h2>
<div>
姓名：{{myName}}
年齡：{{myAge}}
性別：{{mySex}}
<button @click="updateData">修改信息</button>
</div>
<!-- 插槽，定義多個插槽時，需要給插槽定義名稱：具名插槽 -->
<slot name="one"></slot>
<slot name="two"></slot>
<GrandSon1 />
import { ref } from 'vue';
import GrandSon1 from './GrandSon1.vue'
export default {
name: "Son1",
components:{
GrandSon1
},
// 接收父組件傳過來的數據
props:['name','age'],
// Vue2中的方式
/* data() {
return {
myName:this.name,
myAge:this.age,
mySex:this.sex
}
},
methods: {
updateData(){
this.myName = '李四'
this.myAge = 30
this.mySex = '女'
this.$emit('updateName',this.myName)
this.$emit('updateAge',this.myAge)
this.$emit('updateSex',this.mySex)
}
}, */
//setup函數中通過參數props接收父組件傳遞進來的參數
//注意：props參數中，只會接收props選項中接收的參數
//context參數里面有三個對象：attrs，emit，slots
//attrs用于獲取沒有采用props選項接收的參數
//emit用于觸發自定義事件
//slots用于獲取插槽信息
setup(props,{attrs,emit,slots}) {
//slots對象返回的是插槽里面所有內容的虛擬DOM
console.log(slots.one()[0].children);
//獲取姓名和年齡
let myName = ref(props.name)
let myAge = ref(props.age)
//獲取性別
let mySex = ref(attrs.sex)
//修改數據的方法
let updateData = ()=>{
//修改自身數據
myName.value = '李四'
myAge.value = 30,
mySex.value = '女'
//觸發自定義事件，將最新數據回傳給父組件
emit('updateName',myName.value)
emit('updateAge',myAge.value)
emit('updateSex',mySex.value)
}
return{
myName,
myAge,
mySex,
updateData
}
}
};
2. 祖孫組件傳值
祖
import {reactive, provide} from 'vue'
let phone = reactive({
name:'華為',
price:5000
})
//provide將指定的數據添加為依賴數據，讓后代組件可以直接使用
provide('phone',phone)
孫
<h3>GrandSon1</h3>
<div>
手機信息：{{phone}}
<button @click="updatePhone">修改手機</button>
</div>
import {inject} from 'vue'
// inject注入祖級組件中設置為依賴的數據
let phone = inject('phone')
let updatePhone = ()=>{
phone.name = '蘋果'
phone.price = 8000
}
return {
phone,
updatePhone,
}
3. v-model
父
<!-- Vue3可以通過v-model指令實現對多個數據的雙向綁定 -->
<Son2 v-model:name="name" v-model:age="age" v-model:sex="sex"
@click="testClick" />
子
<h2>Son2</h2>
<div>
姓名：{{myName}}
年齡：{{myAge}}
性別：{{mySex}}
<button @click="updateData">修改信息</button>
<button @click="emitClick">觸發一個click事件</button>
</div>
let testClick = (e)=>{
alert(e)
}
import { ref } from 'vue';
export default {
name: "Son2",
//props選項接收父組件參數
props:['name','age','sex'],
//emits選項確定父組件可以觸發哪些事件
//注意：因為click跟原生事件同名，如果不在emits里面配置的話，父組件會觸發兩次click事件
emits:['click'],
setup(props,{emit}) {
let myName = ref(props.name)
let myAge = ref(props.age)
let mySex = ref(props.sex)
let updateData = ()=>{
myName.value = '謝娜'
myAge.value = 35,
mySex.value = '女'
//注意：自定義事件名稱必須命名為update:屬性名
//就可以實現對父組件中指定屬性的雙向綁定
emit('update:name',myName.value)
emit('update:age',myAge.value)
emit('update:sex',mySex.value)
}
let emitClick = ()=>{
//觸發一個click事件
emit('click','哈哈')
}
return{
myName,
myAge,
mySex,
updateData,
emitClick
}
}
};
4.異步組件
定義
<h2>Son3</h2>
<div>姓名：{{name}}，年齡：{{age}}</div>
import {ref} from 'vue'
export default {
name: "Son3",
setup() {
let name = ref('周杰倫')
let age = ref(20)
//注意：通常情況下，setup方法直接返回對象，不要返回Promise對象。
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve({
name,
age
})
}, 2000);
})
}
使用
<!-- suspense用于在渲染異步組件時，顯示Loading... -->
<!-- 注意：異步加載的組件可以用suspense，也可以不用；
但是，如果組件中setup的返回值是一個Promise對象，該組件必須要用suspense -->
<suspense>
<template #default>
<Son3/>
</template>
<template #fallback>
Loading...
</template>
</suspense>
// defineAsyncComponent組合式API，用于定義異步組件
import {defineAsyncComponent} from 'vue'
// 異步導入組件
let Son3 = defineAsyncComponent(()=>import('./components/Son3.vue'))
5. teleport組件
官方起的名稱：瞬移。通過to屬性確定里面的元素移動到哪
<h2>Son4</h2>
<button @click="show=true">彈出</button>
<!-- teleport組件：官方起的名稱：瞬移。通過to屬性確定里面的元素移動到哪 -->
<teleport to="body">
<div v-show="show" class="box">
<button @click="show=false">關閉</button>
</div>
</teleport>
