坚持、坚持、再坚持！
努力、努力、再努力！
今天把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>