堅持、堅持、再堅持！
努力、努力、再努力！
今天把Vue3更完

關(guān)鍵字：父子組件傳值、

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
  },
  // 接收父組件傳過來的數(shù)據(jù)
  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函數(shù)中通過參數(shù)props接收父組件傳遞進(jìn)來的參數(shù)
  //注意：props參數(shù)中，只會接收props選項中接收的參數(shù) 
  //context參數(shù)里面有三個對象：attrs，emit，slots
  //attrs用于獲取沒有采用props選項接收的參數(shù)
  //emit用于觸發(fā)自定義事件
  //slots用于獲取插槽信息
  setup(props,{attrs,emit,slots}) {
      //slots對象返回的是插槽里面所有內(nèi)容的虛擬DOM
      console.log(slots.one()[0].children);
      //獲取姓名和年齡
      let myName = ref(props.name)
      let myAge = ref(props.age)
      //獲取性別
      let mySex = ref(attrs.sex)
      //修改數(shù)據(jù)的方法
      let updateData = ()=>{
          //修改自身數(shù)據(jù)
          myName.value = '李四'
          myAge.value = 30,
          mySex.value = '女'
          //觸發(fā)自定義事件，將最新數(shù)據(jù)回傳給父組件
          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將指定的數(shù)據(jù)添加為依賴數(shù)據(jù)，讓后代組件可以直接使用
provide('phone',phone)

孫

<h3>GrandSon1</h3>
<div>
    手機信息：{{phone}}
    <button @click="updatePhone">修改手機</button>
</div>

import {inject} from 'vue'
// inject注入祖級組件中設(shè)置為依賴的數(shù)據(jù)
let phone = inject('phone')
let updatePhone = ()=>{
    phone.name = '蘋果'
    phone.price = 8000
}
return {
    phone,
    updatePhone,
}

3. v-model

父

<!-- Vue3可以通過v-model指令實現(xiàn)對多個數(shù)據(jù)的雙向綁定 -->
<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">觸發(fā)一個click事件</button>
</div>

let testClick = (e)=>{
    alert(e)
}

import { ref } from 'vue';
export default {
  name: "Son2",
  //props選項接收父組件參數(shù)
  props:['name','age','sex'],
  //emits選項確定父組件可以觸發(fā)哪些事件 
  //注意：因為click跟原生事件同名，如果不在emits里面配置的話，父組件會觸發(fā)兩次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:屬性名
          //就可以實現(xiàn)對父組件中指定屬性的雙向綁定   
          emit('update:name',myName.value)
          emit('update:age',myAge.value)
          emit('update:sex',mySex.value)
      }
      let emitClick = ()=>{
          //觸發(fā)一個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'
// 異步導(dǎo)入組件
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">關(guān)閉</button>
    </div>
</teleport>