VIP30/v3_project/5_setup的细节/Child.vue

<template>
  <h2>子级组件</h2>
  <h3>msg: {{ msg }}</h3>
  <h3>count: {{ count }}</h3>
  <h3>{{ a }}</h3>
  <!-- <button @click="add">点击</button> -->
</template>

<script lang="ts">
import { defineComponent ,ref} from 'vue'

export default defineComponent({
  name: 'Child',
  props: ["msg"],
  //数据初始化生命周期回调
  beforeCreate(){
    console.log("beforeCreate")
  },
  //setup 在beforeCreate回调之前就执行了 而且就执行一次
  //setup执行的时候 组件没有创建出来 意味着组件实例对象this不能调用
  //this是undefined 不能通过this调用  data/computed/methods/props 的东西

  //setup返回值是一个方法和对象  内部的属性和方法都是给html模板去使用的
  //setup中的对象的内部的属性和data函数中的return对象中的属性都可以在html模板当中使用
  //setup中的对象中的属性和data函数中对象中的属性会合并成为组件对象的属性
  //如果重名的话 setup数据优先
  setup (props,content) {
    console.log('setup',this)
    console.log(props,content)
    const a = 10
    const c = ref(10)
    /* 
      props： 包含props配置声明且传入的所有属性的对象
      attrs： 包含没有在props配置中声明的对象，this.$attrs
      slots: 包含所有传入插槽内容的对象，相当于 this.$slots
      emit: 用来分发自定义事件函数,相当于this.$emit
    */
   //注意： methods中可以访问setup所提供的属性和方法，但是在seup方法中不能访问data和methods
    // function add(){
    //   this.d++
    // }
    //setup不能是一个async函数： 因为返回值不是return对象，而是promise，模板看不到return对象中的属性数据
    return {
      a,
      c
    }
  },
  data(){
    return{
      count: 10,
      a: 5,
      d: 1
    }
  },
  methods:{
    // add(){
    //   this.c++
    //   console.log(this.c)
    // }
  },
  mounted(){
    console.log(this)
  }
})
</script>

<style scoped>

</style>