<template>

    
   <div id="dd"></div>
    
 </template>
    
  
    
 <script>
    
 // 1. 导入 onMounted 函数
    
 // onCreated 没有
    
 import { onMounted, onBeforeMount  } from "vue";
    
 export default {
    
   // Vue 2 生命周期回顾:
    
   // 初始化阶段: beforeCreate created 只执行一次
    
   // 挂载阶段: beforeMount mounted 只执行一次
    
   // 更新阶段: beforeUpdate updated 零次或 N 次
    
   // 销毁阶段: beforeDestroy destroyed 只执行一次
    
   setup() {
    
     // let dd = document.querySelector('#dd')
    
     // console.log(dd)
    
     // 如何在 setup 中使用生命周期的钩子函数?
    
     // 2. 在 setup 中调用 onMounted
    
     // 参数: 回调函数, 在 mounted 生命周期时执行
    
     onMounted(() => {
    
       let dd = document.querySelector("#dd");
    
       console.log(dd);
    
       console.log("onMounted 了");
    
     });
    
     onMounted(() => {
    
       console.log("on 又 Mounted 了");
    
     });
    
  
    
     onBeforeMount(() => {
    
       console.log('onBeforeMount 了')
    
     })
    
  
    
     // 注意啦: vue 中没有提供初始化阶段的两个钩子函数: onBeforeCreate onCreated
    
     // 因为 Vue3 认为这两个阶段要做的事情, 都可以在 setup 里面直接做
    
     // console.log(onCreated)
    
     // onCreated(() => {
    
     //   console.log('onCreated 了')
    
     // })
    
   },
    
   mounted() {
    
     console.log("mounted 生命周期钩子函数");
    
   }
    
 };
    
 </script>

 <template>

    
   <Son
    
     msg="这是爸爸给你的消息"
    
     :title="title"
    
     :list="list"
    
     @getValue="getValueHandler"
    
   ></Son>
    
 </template>
    
  
    
 <script>
    
 import { ref } from "vue";
    
 // 父子通信: 父传子
    
 // 1. 父组件中给子组件传递数据, 属性绑定
    
 // 2. 在子组件中定义 props 接收并使用
    
 // props 特点: 单向数据流, 单向下行绑定(父亲变了儿子会同步, 但儿子改数据 老子不认)
    
 // 如果传入的是引用数据类型, 修改对象的属性是可行的, 但是 ESLint 默认会检查并报错, 所以需要单独配置或关闭 ESLint
    
  
    
 // 父子通信: 子传父
    
 // 1. 父组件中给子组件自定义一个事件
    
 // 2. 子组件在合适的时机触发事件并传递数据
    
 import Son from "./components/Son.vue";
    
 export default {
    
   components: {
    
     Son,
    
   },
    
   setup() {
    
     const title = ref("这是爸爸的title");
    
  
    
     function getValueHandler(value) {
    
       console.log('收到儿子的数据:', value)
    
     }
    
  
    
     const list = ref([1, 2, 3]);
    
     return { title, list, getValueHandler };
    
   },
    
 };
    
 </script>

 <template>

    
   <div>
    
     <p>这里是子组件</p>
    
     <p>收到父组件的msg: {{ msg }}</p>
    
     <p>收到父组件的title: {{ title }}</p>
    
     <button @click="title = '改成儿子的title'">点我修改爸爸的title</button>
    
     <ul>
    
       <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    
     </ul>
    
     <button @click="list.push(4)">点我往list中加数据</button>
    
     <hr>
    
     <button @click="sendValue">点我向爸爸发射消息</button>
    
   </div>
    
 </template>
    
  
    
 <script>
    
 export default {
    
   props: {
    
     // 这里定义的是父组件要传递的数据, 必须在这里定义
    
     msg: String,
    
     title: String,
    
     list: Array
    
   },
    
   // setup 钩子函数中有两个参数:
    
   // 参数1: props 父组件传过来的数据都会挂载到这个对象上
    
   // 参数2: context 上下文对象, 有一些全局的实例方法, 例如 emit slots attrs
    
   // setup(props, context) {
    
   setup(props, { emit }) {
    
     // 以前使用 props 数据: this.msg
    
     // 现在没有 this 了, 如果要在 setup 中使用 props 的数据, 则需要接受第一个参数: props
    
     // console.log(props)
    
     // console.log(context)
    
     // this // 没有 this
    
     function sendValue() {
    
       // 在此处触发自定义事件, 携带数据给父组件
    
       // 这里的 this 是指 setup 返回的对象, 所以没有办法调用 $emit 函数
    
       // 故而无法在此处使用 this.$emit() 触发事件, 怎么办呢?
    
       // console.log(this.$emit) 
    
       // 参数1: 事件名
    
       // 参数2~n: 要传递的参数
    
       emit('getValue', '这是儿子孝敬您的数据')
    
       // 为什么 Vue2 的实例方法都是 $ 开头? 
    
       // 因为 Vue2 设计时所有的方法都放到原型上
    
       // data 和 methods 的成员也会被挂载到对象本身 this.msg
    
       // 如果原型上的成员不用 $ 开头, 很容易命名冲突, 命名冲突之后的结果
    
       // this.$set this.$nextTick() this.$emit() this.$mount()
    
       // Vue3 就没有这样设计了, 以上下文对象的形式暴露给用户使用, compositionAPI设计的出现, 让我们更少的依赖 data 和 methods 了
    
     }
    
     return {sendValue}
    
   }
    
 };
    
 </script>

 <template>

    
   <Father></Father>
    
   <button @click="msg = '在 App 中修改的新数据'">在 App 中修改数据</button>
    
 </template>
    
  
    
 <script>
    
 // 目标: 从 App 中将数据传递给 Son
    
 // 使用 provide 和 inject 实现
    
 // 1. 在 App 中导入 provide 函数
    
 // 2. 在 setup 中调用 provide 函数提供数据
    
 // 3. 在 Son 中导入 inject 函数
    
 // 4. 在 setup 中调用 inject 函数获取数据
    
 import Father from './components/Father.vue'
    
 import { provide, ref } from 'vue'
    
 export default {
    
   components: {
    
     Father
    
   },
    
   setup() {
    
     // 参数1: 字符串, key, 提供的数据标识
    
     // 参数2: 数据
    
     // let msg = '这是 App 的数据' // 静态数据
    
     const msg = ref('这是 App 的数据')  // 响应式的数据
    
     // provide('msg', msg.value) // .value 表示将数据取出来后传递给子组件, 丧失了响应式的特性, 如果希望数据也是响应式的传递, 则不能加 .value
    
     // 如果不加 .value 表示传递对象, 加了就是获取静态数据传递过去
    
     provide('msg', msg)
    
  
    
     return {
    
       msg
    
     }
    
   }
    
 };
    
 </script>

 <template>

    
   这是 Father 组件
    
   <Son></Son>
    
 </template>
    
  
    
 <script>
    
 import Son from './Son.vue'
    
 export default {
    
   components: {
    
     Son
    
   }
    
 }
    
 </script>

 <template>

    
   <div>
    
     这是 Son 组件
    
     <p>这是收到的数据: {{ msg }}</p>
    
   </div>
    
 </template>
    
  
    
 <script>
    
 import { inject } from 'vue';
    
 export default {
    
   setup() {
    
     // 参数: 要获取的数据标识 key
    
     // 返回值: 数据
    
     let msg = inject('msg')
    
     return {
    
       msg
    
     }
    
   }
    
 };
    
 </script>