Vue3.2的setup语法糖

第一个：快速引入

原本的需要这三步

<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<p>{{msg}}</p>

<script>
import HelloWorld from '@/components/HelloWorld.vue'; 
export default{
    data(){
        return{
            msg:"哇哈哈哈"
        }
    },
    components:{ 
        HelloWorld 
    }
}
</script>

---

全新的方法，直接就能拿走。我就问你爽不爽？

<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<p>{{msg}}</p>

<script setup>
    import HelloWorld from '@/components/HelloWorld.vue';
    const msg ="哇哈哈哈"
</script>

---

第二个：setup的使用

之前刚出的时候我并不是特别喜欢。感觉就是多出一个setup(){ ... }

{{a}} <p>名字叫：{{b.name}},今年{{b.number}}!</p>
<p>
  <button @click="c">C</button>
  <button @click="d">D</button>
  <button @click="e">E</button>
  <button @click="getName">reacttive的方法</button>
</p>

<script>
    import { ref, reactive } from "vue"
    export default {
        setup() {
            var a = ref("我有一只狗")
            var b = reactive({
                name: "ZK",
                number: 250,
                isTrue: true,
                getName() { this.name = "挂了" }
            })
            var c = () => { alert("我的狗叫什么？" + b.name) }
            var d = () => {
                alert(a.value)
            }
            var e = () => { a.value = "人民币我爱你" }
            return { a, b, c, d, e }
        }
    }
</script>

---

全新的setupscript后面添加，不用return，不用暴露，不用setup范围

{{a}}
<p>名字叫：{{b.name}},今年{{b.number}}!</p>
<p>
  <button @click="c">C</button>
  <button @click="d">D</button>
  <button @click="e">E</button>
  <button @click="getName">readtive</button>
</p>


<script setup>
    import { ref, reactive } from "vue"
    var a = ref("我有一只狗")
    var b = reactive({
        name: "ZK",
        number: 250,
        isTrue: true,
        getName() { this.name = "挂了" }
    })
    var c = () => { alert("我的狗叫什么？" + b.name) }
    var d = () => {
        alert(a.value)
    }
    var e = () => { a.value = "人民币我爱你" }
</script>

---

props

其实就是props父传子，以前父亲在身上进行引入儿子
儿子那边大喊props，就是你HTML身体上的的口号

<lst info="阴险狡诈顶呱呱" :user="userinfo"></lst>

<script>
    import lst from "./views/Home.vue";
    export default{
        data(){
            return{
                userinfo:[{name:'常吉孔', age:18}]
            }
        },
        components:{ lst }
    }
</script>

<template>
    <div>
        {{info}} / {{user[0].name}} / {{user[0].age}}
    </div>
</template>
<script>
    export default{
        props:["info", "user"]
    }
</script>

---

全新的父传子的方法

<lst msg="嘻嘻嘻嘻" :user="userinfo"></lst>
<script setup>
    import { reactive } from "vue"
    import lst from "./views/Home.vue";
    var userinfo = reactive({
        name:'常吉孔',
        age:18
    }) 
</script>

//子元素直接调用
<div>
  {{msg}}
  {{user.name}}
  {{user.age}}
</div>
<script setup>
    import { defineProps } from "vue"
    defineProps(['msg', 'user'])
</script>