vue3中的组件实例和计算属性
1.通过getCurrentInstance进行获取组件实例(获取的是代理对象),通过其中的proxy中取到实例对象,但是值得注意的是,确保组件实例对象创建完成以后再去调用,否则不能执行。(可以在onMounted生命周期钩子中使用)vue3中的计算属性和vue2中的关键词相同,也是通过computed关键词进行使用,用法有一点点小小变化,如下边代码(不需要写在export defalut中了)
·
一、组件实例的获取
1.通过getCurrentInstance进行获取组件实例(获取的是代理对象),通过其中的proxy中取到实例对象,但是值得注意的是,确保组件实例对象创建完成以后再去调用,否则不能执行。(可以在onMounted生命周期钩子中使用)
<template>
<main>
this is home.{{msg}}{{lsb}}
</main>
</template>
<script >
export default{
name:'homeview',
data:()=>({
msg:'kk',
lsb:'123'
}),
methods:{
date(){
console.log('abc');
}
}
}
</script>
<script setup>
import {getCurrentInstance, onMounted} from 'vue';
onMounted(()=>{
var obect=getCurrentInstance();
obect.proxy.date();
});
</script>
二、计算属性
vue3中的计算属性和vue2中的关键词相同,也是通过computed关键词进行使用,用法有一点点小小变化,如下边代码(不需要写在export defalut中了)
<template>
<div>
this is about{{allname}}
</div>
<button @click="btn">换名字</button>
</template>
<script setup>
import {ref} from 'vue';
import { computed } from '@vue/reactivity';
let firstname=ref('星星');
let lastname=ref('寒');
let allname=computed(()=>{
return lastname.value+firstname.value;
});
function btn(){
lastname.value='大';
firstname.value="明星";
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)