You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
884 B
45 lines
884 B
<template> |
|
<div>{{ name }}: {{ counter }} {{ obj.title }}</div> |
|
<div>{{ twiceTheCounter }}</div> |
|
<button @click="action">点击</button> |
|
</template> |
|
|
|
<script> |
|
import {ref, reactive, onMounted, watch, computed} from "vue"; |
|
|
|
export default { |
|
props: { |
|
name: String, |
|
}, |
|
|
|
setup() { |
|
// data |
|
const counter = ref(0); |
|
const obj = reactive({title: "组件B标题"}); |
|
// computed |
|
const twiceTheCounter = computed(() => counter.value * 2); |
|
// watch |
|
watch(counter, (newValue, oldValue) => { |
|
console.log(newValue, oldValue); |
|
obj.title = "组件B标题---新" |
|
}); |
|
// methods |
|
const action = () => { |
|
counter.value = counter.value + 3; |
|
}; |
|
// hook |
|
onMounted(() => console.log("onMounted")); |
|
|
|
return { |
|
counter, |
|
obj, |
|
twiceTheCounter, |
|
action |
|
}; |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
|
|
</style>
|
|
|