Vue 3.2 setup 语法糖

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用

setup 选项是一个接收 props 和 context 的函数

• 由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

• 不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this 修改成了 undefined
• vue3通过ref reactive来定义响应式数据

• <template>
    <my-component :num="num" @click="addNum" />
  </template>
  
  <script setup>
    import { ref } from 'vue';
    import MyComponent from './MyComponent .vue';
  
    // 像在平常的setup中一样的写,但是不需要返回任何变量
    const num= ref(0)       //在此处定义的 num 可以直接使用
    const addNum= () => {   //函数也可以直接引用,不用在return中返回
      num.value++
    }
  </script>
  
  //必须使用驼峰命名
  
  

  2.使用setup组件自动注册

  在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，
  并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。
  
  <template>
      <zi-hello></zi-hello>
  </template>
  
  <script setup>
    import ziHello from './ziHello'
  </script>
  

  3.使用setup后新增API

• defineProps  用来接收父组件传来的 props

• defineEmits
• defineExpose

<template>
  <div class="die">
    <h3>我是父组件</h3>
    <zi-hello :name="name"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from './ziHello'
  
  import {ref} from 'vue'
  let name = ref('郑========')
</script>


<template>
  <div>
    我是子组件{{name}} // 
  </div>
</template>

<script setup>
  import {defineProps} from 'vue'

  defineProps({
   name:{
     type:String,
     default:'我是默认值'
   }
 })
</script>

defineEmits 子组件向父组件事件传递。、

<template>
  <div>
    我是子组件{{name}}
    <button @click="ziupdata">按钮</button>
  </div>
</template>

<script setup>
  import {defineEmits} from 'vue'

  //自定义函数，父组件可以触发
  const em=defineEmits(['updata'])
  const ziupdata=()=>{
    em("updata",'我是子组件的值')
  }

</script>

<template>
  <div class="die">
    <h3>我是父组件</h3>
    <zi-hello @updata="updata"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from './ziHello'
  
  const updata = (data) => {
    console.log(data); //我是子组件的值
  }
</script>

defineExpose   组件暴露出自己的属性，在父组件中可以拿到

<template>
  <div>
    我是子组件
  </div>
</template>

<script setup>
  import {defineExpose,reactive,ref} from 'vue'
  let ziage=ref(18)
  let ziname=reactive({
    name:'赵小磊'
  })
  //暴露出去的变量
  defineExpose({
    ziage,
    ziname
  })
</script>


<template>
  <div class="die">
    <h3 @click="isclick">我是父组件</h3>
    <zi-hello ref="zihello"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from './ziHello'
  import {ref} from 'vue'
  const zihello = ref()

  const isclick = () => {
    console.log('接收ref暴漏出来的值',zihello.value.ziage)
    console.log('接收reactive暴漏出来的值',zihello.value.ziname.name)
  }
</script>