上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并且控制台报错,那这篇博客就是讲解遇到的这个问题应该如何处理。
使用 ref 函数很简单,首先要在页面引用,然后就可以直接使用了,具体怎么使用呢,下面为了方便介绍,简单来几个案例。
首先提一个需求:页面有一个名称需要显示,有一个按钮,点击按钮的时候修改页面展示的这个名字。
<template> <div> <h1>ref reactive 函数</h1> <h1>姓名:{{name_ref}}</h1> <el-button type="primary" @click="btn">修改名字</el-button> </div> </template> <script> import { ref } from 'vue' // 引入 ref export default { setup() { const name = '