Vue3 script-setup语法糖

vscode中使用script setup

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

2.Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。

1.组件无需注册，变量不需要return，ref不需要写value

---

2.defineProps

用来接收父组件传来的 props

父组件代码

<template>
  <div class="die">
    <h1>我是父组件</h1>
    < Child :name="name"></Child>
  </div>
</template>

<script setup>
  import Child from './child'
  
  import {ref} from 'vue'
  let name = ref('111')
</script>

子组件

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

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

  defineProps({
   name:{
     type:String,
     default:' '
   }
 })
</script>

script-setup使用props

---

3.defineEmits

子组件

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

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

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

</script>

父组件

<template>
  <div>
    <h1>我是父组件</h1>
    <zi-hello @child_emit="child_emit"></zi-hello>
  </div>
</template>

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

---

4.使用computed

<script setup>
  import { computed, ref } from 'vue'

  const count = ref(1)

  // 通过computed获得doubleCount
  const doubleCount = computed(() => {
    return count.value * 2
  })
  // 获取
  console.log(doubleCount.value)
</script>

先写这么多