File size: 1,505 Bytes
4d70170 |
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<script>
import { computed, reactive, ref } from 'vue'
export default {
name: 'Child',
setup() {
const answer = ref(42)
const doubleAnswer = computed(() => answer.value * 2)
const reactiveObject = reactive({
foo: 'bar',
hello: {
world: 1,
},
nil: undefined,
nestedRef: ref('meow'),
nestedComputed: computed(() => answer.value * 4),
map: new Map(),
})
reactiveObject.map.set('foo', ref('bar'))
function myMethodFromSetup() {
console.log('foobar')
}
const internalComputed = ref(0)
const writableComputed = computed({
get: () => internalComputed.value,
set: (value) => {
internalComputed.value = value
},
})
return {
answer,
doubleAnswer,
reactiveObject,
myMethodFromSetup,
writableComputed,
}
},
data() {
return {
classicAnswer: 42,
}
},
computed: {
classicDoubleAnswer() {
return this.classicAnswer * 2
},
classicEditableComputed: {
get() {
return this.classicAnswer
},
set(value) {
this.classicAnswer = value
},
},
},
mounted() {
this.$emit('child mounted', 'bar')
},
}
</script>
<template>
<div>
Child: {{ answer }} x2: {{ doubleAnswer }} x4: {{ reactiveObject.nestedComputed }}
<button @click="answer *= 2">
double it
</button>
<button @click="answer--">
minus one
</button>
</div>
</template>
|