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.
46 lines
884 B
46 lines
884 B
1 year ago
|
<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>
|