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.
36 lines
744 B
36 lines
744 B
<template> |
|
<div>{{ name }}: {{ counter }} {{ obj.title }}</div> |
|
<div>{{ twiceTheCounter }}</div> |
|
<button @click="action">点击</button> |
|
</template> |
|
|
|
<script setup> |
|
import {ref, reactive, onMounted, watch, computed} from "vue"; |
|
// props |
|
const props = defineProps({ |
|
name: String, |
|
}) |
|
// data |
|
const counter = ref(0); |
|
const obj = reactive({title: "组件C标题"}); |
|
// computer |
|
const twiceTheCounter = computed(() => counter.value * 2); |
|
// watch |
|
watch(counter, (newValue, oldValue) => { |
|
console.log(newValue, oldValue); |
|
obj.title = "组件C标题---新" |
|
} |
|
); |
|
// methods |
|
const action = () => { |
|
counter.value = counter.value + 3; |
|
} |
|
// hook |
|
onMounted(() => { |
|
console.log("onMounted") |
|
}) |
|
</script> |
|
|
|
<style scoped> |
|
|
|
</style>
|
|
|