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.
37 lines
744 B
37 lines
744 B
1 year ago
|
<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>
|