首页 > 其他分享 >vue3中setup

vue3中setup

时间:2023-10-15 22:15:18浏览次数:39  
标签:const log setup vue2 vue3 函数

和vue2不同的是vue3中的script中带有setup标签

里面的setup相当于vue2中的data和methds空间可以放置函数,也可以执行函数

在写时需要有return返回值

<script setup>

</script>

setup执行发生在页面之前所以不能使用this函数,一般通过ref绑定组件上的值进行修改

 

使用函数例子

<template>
  <div>
<div>setup函数用法</div>
<button @click="handleClick">点击</button>
<hr>
  </div>
</template>

 

<script setup>
    const handleClick = () => {
      console.log(123)
    }
</script>

 

标签:const,log,setup,vue2,vue3,函数
From: https://www.cnblogs.com/JJTyyds/p/17766306.html

相关文章

  • Vue3 + Quasar系列-代码配置以及报错汇总记录(不断更新中)
    1.Vue3+Quasar系列-代码配置打包去掉hash后缀去掉hashhttps://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa2.Vue3+Quasar改变主题背景quasar的样式和其他的框架修改不太一样,需要我们使用动态的方式来进行变更,一般来说有两种方案进行主题修改方案一:......
  • Vue3| Pinia 持久化插件
    对vuex或Pinia里面的内容做本地持久化1.安装插件:npmipinia-plugin-persistedstate2.将插件添加到pinia实例上①main.js里导入持久化插件:importpiniaPluginPersistedstatefrom'pinia-plugin-persistedstate'② app.use(pinia.use(piniaPluginPersistedstate))......
  • Vue3| Pinia 的 action 异步写法
    import{defineStore}from'pinia'import{ref}from'vue'importaxiosfrom'axios'exportconstuseChannelStore=defineStore('channel',()=>{  constchannelList=ref([])  constgetList=()=>......
  • <script setup> 语法糖作用
    <scriptsetup>constmsg='信息详情'constclickMsg=()=>{console.log(2223323)}</script><template><div>{{msg}}</div><br><button@click="clickMsg">按钮</button></tem......
  • Vue3| Pinia 的语法
    Pinia是Vue的最新状态管理工具,是Vuex的替代品Pinia的优势:1.提供更简单的API(去掉了mutation)2.提供符合组合式风格的API(和Vue3新语法统一)3.去掉了modules的概念,每一个store都是一个独立的模块4.配合TypeScript更加友好,提供可靠的类型推断 Pinia基本......
  • Vue3| 组合式 API——provide 和 inject
    作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信 跨层传递普通数据步骤:1.顶层组件通过provide函数提供数据provide('key', 顶层组件中的数据) 2.底层组件通过inject函数获取数据const message=inject('key')   //'k......
  • Vue3| 模板引用、defineExpose宏函数
    模板引用的概念:通过ref标识获取真实的dom对象或者组件实例对象 使用:1.调用ref函数生成一个ref对象<script setup>import {ref} from 'vue'const h1Ref=ref(null)</script>2.通过ref标识绑定ref对象到标签<script setup>import {ref......
  • Vue3| 组合式 API 下的 子传父
    步骤:1.子组件内部通过emit方法触发事件①通过defineEmits编译器宏生成emit方法<script setup>const emit= defineEmits(['get-message'])  //get-message:可以触发的事件</script>②触发自定义事件,并传递参数<script setup>const emit= define......
  • Vue3| 组合式 API 下的父传子
    步骤:一、父给子传写死的值1.父组件中给子组件以添加属性的方式传值<script setup>import sonComVue from './son-com.vue'  //局部注册</script> <template><sonComVue message="黑马程序员"></sonComVue></template>2.子组件内部通过pro......
  • Vue3| 组合式API——computed 计算属性函数
    计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法 核心步骤:1.导入computed函数<scriptsetup>import{computed}from'vue'</script>2.执行函数在回调参数中return基于响应式数据做计算的值,用变量接收<scriptsetup>import{com......