«

Vue3如何使用setup语法糖拒绝写return

时间：2024-7-6 09:30     作者：韩俊     分类： Javascript

这篇“Vue3如何使用setup语法糖拒绝写return”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue3如何使用setup语法糖拒绝写return”文章吧。

    Vue3.2 setup语法糖

    <script setup>
    是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖

    解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在

    <template/>
    使用的问题

    1.<script setup>在<template/>使用

    <script setup>
    中无需return 声明的变量、函数以及import引入的内容，即可在
    <template/>
    使用

    <script setup>
    语法糖

    <script setup>
//import引入的内容
import { getToday } from './utils'  
// 变量
const msg = 'Hello!'
// 函数
function log() {
  console.log(msg)
}
</script>

//在template中直接使用声明的变量、函数以及import引入的内容
<template>
  <div @click="log">{{ msg }}</div>
   <p>{{getToday()}}</p>
</template>

    标准组件

    <script>
    需要写setup函数并繁琐retrun

    <script>
//import引入的内容
import { getToday } from './utils'  
export default{
 setup(){
    // 变量
    const msg = 'Hello!'
    // 函数
    function log() {
      console.log(msg)
    }
    //想在tempate里面使用需要在setup内return暴露出来
    return{
       msg,
       log,
       getToday 
    }
 }
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
   <p>{{getToday()}}</p>
</template>

    小结：

    <script setup>
    语法糖里面的代码会被编译成组件 
    setup()
    函数的内容，不需要通过return暴露 声明的变量、函数以及import引入的内容，即可在
    <template/>
    使用，并且不需要写
    export default{}

    <script setup>
    语法糖里面的代码会被编译成组件 
    setup()
    函数的内容。这意味着与普通的 
    <script>
    只在组件被首次引入的时候执行一次不同，
    <script setup>
    中的代码会在每次组件实例被创建的时候执行

      <script>
  console.log('script');//多次实例组件,只触发一次
  export default {
      setup() {
          console.log('setupFn');//每次实例化组件都触发和script-setup标签一样
      }
  }
  </script>

    （script-setup标签最终都会编译成

    setup()
    函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）

    2、<script setup>引入组件将自动注册

    不需要在引入组件后，通过 

    components:{}
    注册组件，可直接使用

    &lt;script setup&gt;
import MyComponent from './MyComponent.vue'
//components:{MyComponent}  不需要注册直接使用
&lt;/script&gt;

&lt;template&gt;
 &nbsp;&lt;MyComponent /&gt;
&lt;/template&gt;

    3、组件通信:

    在

    <script setup>
    中必须使用 
    defineProps
    和
     defineEmits
    API 来替代 props 和 emits

    defineProps
    和 
    defineEmits
    具备完整的类型推断并且在 
    <script setup>
    中是直接可用的(浏览了一下掘金，发现大部分文章demo还是通过import引入这2个api，这点官方文档写得很清楚)

    defineProps 代替props

    接收父组件传递的数据（父组件向子组件传参）

    父组件:

    <template>
  <div>父组件</div>
  <Child :title="msg" />
</template>

<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const msg = ref('父的值')  //自动返回，在template直接解套使用
</script>

    子组件：

    <template/>
    中可以直接使用父组件传递的props （可省略props.）

    <script-setup>
    需要通过props.xx获取父组件传递过来的props

    <template>
  <div>子组件</div>
  <div>父组件传递的值：{{title}}</div>
</template>

<script setup>
//import {defineProps} from 'vue'   不需要引入

//语法糖必须使用defineProps替代props
const  props = defineProps({
  title: {
    type: String
  }
});
//script-setup 需要通过props.xx获取父组件传递过来的props
console.log(props.title) //父的值
</script>

    defineEmit 代替emit

    子组件向父组件传递数据（子组件向外暴露数据）

    子组件代码:

    <template>
  <div>子组件</div>
  <button @click="toEmits">子组件向外暴露数据</button>
</template>

<script setup>
import {ref} from 'vue'
const name = ref('我是子组件')
//1、暴露内部数据
const  emits = defineEmits(['childFn']);

const  toEmits = () => {
  //2、触发父组件中暴露的childFn方法并携带数据
  emits('childFn',name)
}
</script>

    父组件代码:

    <template>
  <div>父组件</div>
  <Child  @childFn='childFn' />
  <p>接收子组件传递的数据{{childData}} </p>
</template>

<script setup>
import {ref} from 'vue'
import Child from './child.vue'
    
const childData = ref(null)    
const childFn=(e)=>{
    consloe.log('子组件触发了父组件childFn，并传递了参数e')
    childData=e.value
}    
       
</script>

    4.<script setup>需主动向父组件暴露子组件属性 ：defineExpose

    使用 

    <script setup>
    的组件，父组件是无法通过ref 或者 
    $parent
    获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露

    子组件代码：

    <script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
  a,
  b
})
</script>

    父组件代码:

    <template>
  <div>父组件</div>
  <Child  ref='childRef' />
  <button @click='getChildData'>通过ref获取子组件的属性 </button>
</template>

<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childRef= ref()  //注册响应数据  
const getChildData =()=>{
  //子组件接收暴露出来得值
  console.log(childRef.value.a) //1
  console.log(childRef.value.b) //2  响应式数据
}    
</script>

    5.语法糖其他功能

    useSlots
    和 
    useAttrs
    （少用，由于大部分人是SFC模式开发，在
    <template/>
    通过
    <slot/>
    标签就可以渲染插槽）

    如果需要在

    script-setup
    中使用 
    slots
    和 
    attrs
    需要用
    useSlots
    和 
    useAttrs
    替代

    需要引入：import { useSlots ,useAttrs } form 'vue'

    在

    <template/>
    中通过 
    $slots
    和 
    $attrs
    来访问更方便（attrs用来获取父组件中非props的传递到子组件的参数/方法，attrs 用来获取父组件中非props的传递到子组件的参数/方法，attrs用来获取父组件中非props的传递到子组件的参数/方法，slots可以获取父组件中插槽传递的虚拟dom对象，在SFC模式应该用处不大，在JSX /TSX使用比较多）

    父组件:

    <template>
  <Child msg="非porps传值子组件用attrs接收" >
    <!-- 匿名插槽 -->
    <span >默认插槽</span>
    <!-- 具名插槽 -->
    <template #title>
      <h3>具名插槽</h3>
    </template>
    <!-- 作用域插槽 -->
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
    </template>
  </Child>
</template>

<script setup>
// 引入子组件
import Child from './child.vue'
</script>

    子组件：

    <template>
  <!-- 匿名插槽 -->
  <slot />
  <!-- 具名插槽 -->
  <slot name="title" />
  <!-- 作用域插槽 -->
  <slot name="footer" :scope="state" />
  <!-- $attrs 用来获取父组件中非props的传递到子组件的参数 -->
  <p>{{ attrs.msg == $attrs.msg }}</p>
  <!--true  没想到有啥作用... -->
  <p>{{ slots == $slots }}</p>
</template>

  
<script setup>
import { useSlots, useAttrs, reactive, toRef } from 'vue'
const state = reactive({
  name: '张三',
  age: '18'
})

const slots = useSlots()
console.log(slots.default()); //获取到默认插槽的虚拟dom对象
console.log(slots.title());   //获取到具名title插槽的虚拟dom对象
// console.log(slots.footer()); //报错  不知道为啥有插槽作用域的无法获取
//useAttrs() 用来获取父组件传递的过来的属性数据的（也就是非 props 的属性值）。
const attrs = useAttrs()
</script>

    useSlots或许在JSX/TSX下更实用

    想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx

    useSlots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容

    <script lang='jsx'>
import { defineComponent, useSlots } from "vue";
export default defineComponent({
  setup() {
    // 获取插槽数据
    const slots = useSlots();
    // 渲染组件
    return () => (
      <div>
        {slots.default?slots.default():''}
        {slots.title?slots.title():''}
      </div>
    );
  },
});
</script>

    大部分人是SFC模式开发，在

    <template/>
    通过
    <slot/>
    标签就可以渲染插槽，这种JSX 的写法应该是很少人会使用的

    6.在setup访问路由

      访问路由实例组件信息：route和router

    setup
    里不能访问 
    this
    ，不能再直接访问 
    this.$router
    或 
    this.$route
    。（getCurrentInstance可以替代this但不推荐）

    推荐：使用

    useRoute
    函数和
    useRouter
    函数替代
    this.$route
    和 
    this.$router

    <script setup>
import { useRouter, useRoute } from 'vue-router'
    const route = useRoute()
    const router = useRouter()
    
    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  <script/>

      导航守卫

    仍然可以使用路由实例组件的导航守卫

    import router from './router'
router.beforeEach((to,from,next)=&gt;{

})

    也可以使用组合式api的导航守卫

    onBeforeRouteLeave, onBeforeRouteUpdate

    <script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

    // 与 beforeRouteLeave 相同，无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // 取消导航并停留在同一页面上
      if (!answer) return false
    })

    const userData = ref()

    // 与 beforeRouteUpdate 相同，无法访问 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
 <script/>

    组合式 API 守卫也可以用在任何由 `<router-view>` 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。

    标签: javascript vue

    热门推荐

    1 Vue前端怎么实现分页和排序
    2 深入浅析JavaScript系列（13）：This? Yes,this!
    3 JavaScript:Array类型全面解析
    4 JavaScript高级程序设计（第3版）学习笔记3 js简单数据类型
    5 js split 的用法和定义 js split分割字符串成数组的实例代码
    6 ajax需要哪些包_ajax需要的包有哪些
    7 NodeJs的优势和适合开发的程序
    8 javascript实现移动端上的触屏拖拽功能
    9 jquery ui dialog替代confirm实例分析
    10 vue中vite.config.js配置跨域及环境的方法是什么

    日历

    标签

    hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

    搜索

    最新文章

    热门文章