vue3初始2

最新推荐文章于 2024-09-14 09:50:15 发布

一沓纸稿

最新推荐文章于 2024-09-14 09:50:15 发布

阅读量90

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45662523/article/details/126395852

版权

Vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

Vue3的setup函数是组合式API的核心，用于声明组件的状态和方法。在这个函数中，props可以直接访问，但不再有this。setup返回的对象属性和方法可以直接在模板中使用。子组件通过context的emit方法触发自定义事件来传递数据给父组件。watch在setup中依然可用，可以监听多个数据变化。注意，当监听reactive数据时，旧值可能不可用，且默认开启深度监听。

摘要由CSDN通过智能技术生成

setup总结：

setup是所有组合式API的容器，值为一个函数，组件中需要用到的方法，数据等，都要写在其中，

需要注意的是，v3里this不在指向Vue实例，所以访问this是undefined，最重要的是setup具有返回值，如果返回值是一个对象的话，那么对象中的属性和方法则可以在模板中直接使用

setup不能是async函数，因为他的返回值不在是return的对象，而是promise，

父传子子传父

父传子，没有多大变化，主要还是props接收父组件传过来的数据，不过就是使用到了sertup函数

比如父组件传过来一个msg，使用props接收完毕，并且使用它，则需要这样做

setup(props,context){
        console.log(props,context);
｝

子传父有点小变化

请注意v2中的this.$emit不在生效，setup函数中没有this，但是setup中的第二个参数context提供了emit方法即这样做

子组件


    setup(props,context){
        context.emit('name','儿子的值')
｝

父组件

<template>
    <Son @name="name" ></Son>
</template>
 
  setup() {
      const name = (name)=>console.log(name);
//别忘了return
        return {name}
  },

两句话总结：

父传子：在setup中使用props数据 setup(props)props就是父组件数据
子传父：触发自定义事件的时候emit来自 setup(props,{emit})，emit 就是触发事件函数

watch与v2变化不大，还是在setup函数中写，可以监听多个数据的变化即：


 
<script>
//引入别忘了
import {ref,watch} from 'vue'
export default {
  setup() {
      let num=ref(1)
      let num2=ref(2)
    const addNum=()=>num.value++
    const addNum2=()=>num2.value++
      watch([num,num2],(newValue)=>{
          console.log(newValue);
      })
      return {num,num2,addNum,addNum2}
  },
};
</script>

复杂数据的监听依然是要开启深度监听，即deep：true

但是如果若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue ，

如果watch监视的是reactive定义的响应式数据，则强制开启了深度监视