vue3使用setup语法糖

< 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{}内的,外的只是首次引入的时候执行一次)

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

不需要在引入组件后,通过 components:{}注册组件,可直接使用

<script setup>
import MyComponent from './MyComponent.vue'
//components:{MyComponent}  不需要注册直接使用
</script><template>
  <MyComponent />
</template>

组件通信:在< script setup>中必须使用 defineProps 和 defineEmits API 来替代 props 和 emits

  • 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>
  <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>

< 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>

在setup访问路由

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

setup 里不能访问 this,不能再直接访问 this. r o u t e r 或 t h i s . router 或 this. routerthis.route。(getCurrentInstance可以替代this但不推荐)
推荐:使用useRoute 函数和useRouter函数替代this. r o u t e 和 t h i s . route 和 this. routethis.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)=>{
})

也可以使用组合式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/>
  • 6
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值