mirror of
https://github.com/luzhisheng/js_reverse.git
synced 2025-04-19 22:49:54 +08:00
33 lines
590 B
Vue
33 lines
590 B
Vue
<template>
|
||
<div class="father">
|
||
<h3>父组件</h3>
|
||
<h4>a：{{a}}</h4>
|
||
<h4>b：{{b}}</h4>
|
||
<h4>c：{{c}}</h4>
|
||
<h4>d：{{d}}</h4>
|
||
<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="Father">
|
||
import Child from './Child.vue'
|
||
import {ref} from 'vue'
|
||
|
||
let a = ref(1)
|
||
let b = ref(2)
|
||
let c = ref(3)
|
||
let d = ref(4)
|
||
|
||
function updateA(value:number){
|
||
a.value += value
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.father{
|
||
background-color: rgb(165, 164, 164);
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
}
|
||
</style>
|