Vue3的语法糖

1. setup的写法（两种）
   一是在script内部写setup函数

      setup() {
        return {
          模版中需要的数据和方法
        }
      }
   

   二是在script标签中写setup

   • 在语法糖中，省略了导出export default() 省略了setup函数，省略了return({})
     子组件导入即可使用，无需在components中注册

2. 组件传值
   父传子
   在父组件中子组件标签使用未定义的数据变量，向子组件传值，在子组件的语法糖中使用defineProps()声明自定义属性用于接收父组件传值

     <script setup>
       const props=defineProps(["name", "age"])
       console.log(props.name) // 获取传值
     </script>
   

   子传父
   在语法糖中使用defineEmits()注册自定义事件用于向父组件传值，返回是emit函数.在父组件中使用绑定自定义事件来拿到子组件向父组件的传值
   defineEmits()函数参数是一个数组，用于定义自定义事件，可以是小驼峰也可以是全部小写，但是在绑定自定义事件书写应为全部小写。

     <!-- 父组件 -->
     <HelloWorld @setAge="value=>{age=value}"/>
   
     <!-- 子组件 -->
     <script setup>
       import { ref } from "vue"
       const emit = definedEmits(["setAge"])
   
       function changeAge() {
         emit("setName", 'lisi')
       }
     </script>
   

3. 语法糖中使用路由

       const route = useRoute()
       const router = useRouter()
       
       function goPage() {
         router.push("/")
       }
   

4. 在语法糖中调用状态管理仓库中的变量

      import { createStore } from 'vuex'
   
      export default createStore({
        state: {
          name: 'zhangsan'
        },
        getters: {},
        mutations: {
          setName(state, value) {
            state.name = value
          }
        },
        actions: {},
        modules: {}
      })
   

      <h1>{{store.state.name}}</h1>
   
      <button @click="handleClick">点击修改name</button>
   
      import { useStore } from "vuex"
      function handleClick() {
        store.commit("setName", 'lisi')
      }