vue3--计算属性

和vue2的差不多
只是需要引入
使用时，用成方法形式！

<template>
    <h1>一个人的信息</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="test">测试触发demo组件的hello事件</button>
    <slot name="qwe"></slot>
    <br>
    姓：<input type="input" v-model="person.firstName">
    <br>
    名：<input type="input" v-model="person.lastName">
    <br>
    <span>全名：{{person.fullName}}</span>
    <br>
    全名：<input type="input" v-model="person.fullName">
</template>

<script>
import {reactive,computed} from 'vue'
export default {
    name:'Demo',
    props:['msg','school'],
    emits:['hello'],
    beforeCreate() {
        console.log("---beforeCreate--")
    },
    setup(props,context){
        // console.log('---setup-props---',props)
        // console.log('---setup-context---',context)
        // console.log('---setup-context-emit--',context.emit)
        // console.log('---setup-context-slots--',context.slots)
        // 数据
        let person = reactive({
            firstName:'张',
            lastName:'三',
            age:18
        })
        // 计算属性--简写（没有考虑计算属性被修改的情况）
    //    person.fullName = computed(() =>{
    //         return person.firstName + '-' + person.lastName
    //     })
    // 计算属性--完整写发（没有考虑计算属性被修改的情况）
       person.fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName =  nameArr[0]
            person.lastName =  nameArr[1]

        }
        })
        function test(){
            context.emit('hello',666)
        }

        // 返回一个对象（常用）
        return{
            person,
            test,
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

结果：