vue3的新写法和特性整理——三、变量和事件的绑定


vue3中,实现数据驱动,在写法上有了改变

<template>
  <div style="cursor:pointer;" @click="changeWord">{{world}}</div>
</template>

<script>
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const data = reactive({
      world: 'Hellow world'
    });
    let changeWord = () => {
      data.world == 'Hellow world'? data.world="get out of the world":data.world ="Hellow world";
    };
    return {
      changeWord,
      ...toRefs(data)
    };
  },
  components: {}
};
</script>

<style>
</style>

  关键代码:使用reactive包装变量,在setup函数中结构toRefs函数返回的对象,方法直接返回便能够被当前组件使用。
方法的绑定和vue2保持一致,但是函数声明的位置发生了变化(当然也能继续写在methods中,但是这样在使用vue3的provide和reject时可能会遇到某些问题,至于是什么,本人还在学习中,今后补充,也希望各位能够指点)。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM