您现在的位置是:群英 > 开发技术 > web开发
vue3中setup函数的参数有什么,使用要注意哪些
Admin发表于 2022-08-27 17:11:01594 次浏览
在实际案例的操作过程中,我们可能会遇到“vue3中setup函数的参数有什么,使用要注意哪些”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起了解看看吧。

1.setUp函数的第1个参数props

setup(props,context){}

第一个参数props:

props是一个对象,包含父组件传递给子组件的所有数据。

在子组件中使用props进行接收。

包含配置声明并传入的所有的属性的对象

也就是说:如果你想通过props的方式输出父组件传递给子组件的值。

你需要使用props进行接收配置。即props:{......}

如果你未通过Props进行接受配置,则输出的值是undefined【相关推荐:vue.js视频教程】

<template>
  <div>
    父组件 
  </div>
  <no-cont :mytitle="msg" 
      othertitle="别人的标题"
      @sonclick="sonclick">
  </no-cont>
</template>

<script>
import NoCont from "../components/NoCont.vue"
export default {
  setup () {
    let msg={
      title:'父组件给子给子组件的数据'
    }
    function sonclick(msss:string){
      console.log(msss)
    }
    return {msg,sonclick}
  },
  components:{
    NoCont
  }
}
</script>
<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
 //  未进行接受
 //   props:{
 //     mytitle:{
 //         type:Object
 //     }
 //   },
  setup(props,context){
    console.log('props==>',props.mytitle);//输出的值是 undefined
    function sonHander(){
        context.emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

为什么通过props.mytitle输出的值是undefined呢?

因为我们没有使用props进行接收配置。即

props:{
    mytitle:{
        type:Object
    }
},

如果我们添加上接受配置

2.参数context的讲解

第2个参数:context,是一个对象。

里面有attrs(获取当前标签上的所有属性的对象)

但是该属性是props中没有声明接收的所有的对象。

如果你使用props去获取值,同时props中你声明了你要获取的值

则:获取的值是undefined

注意点:

attrs获取值是不需要props中没有声明接收。

第1个参数props获取值是需要props中声明接收的

有emit事件分发,(传递给父组件需要使用该事件)

有slots插槽

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    //输出{title:父组件传递的值}
    console.log('props==>',props.mytitle);
    
    // 输出别人的标题【使用context获取值,不需要使用props去接受】
    console.log('context==> ',context.attrs.othertitle);
    
    // 输出undefined,因为context不需要使用props去接受。
    console.log('contextmytitle==> ',context.attrs.mytitle);
    function sonHander(){
        context.emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

3. 子组件向父组件派发事件

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    function sonHander(){
        context.emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

4.优化事件派发

我们知道第2个参数context是一个对象

并且对象中有三个属性attrs,slots,emit

在事件派发的时候,直接使用emit就ok了

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    //直接使用emit进行事件派发
    function sonHander(){
        emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

5.获取父组件传递的值

我们将使用props参数获取值

以及使用attrs获取值

<template>
<hr/>
   <h2>子组件</h2>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
    <h2>使用了props声明接收==>{{ mytitle  }}</h2> 
    <h2>使用参数attrs获取==>{{ attrs.othertitle  }}</h2> 
</template>

<script>
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    function sonHander(){
        emit('sonclick','子组件传递给父组件')
    }
    return {sonHander,attrs}
  }
});
</script>

附使用setup函数时需要注意几点:

  • setup函数的执行时机是在beforeCreate和created之间
  • 由于setup执行时机是在created之间,所以组件才刚刚被创建,而data和methods还没初始化好,所以无法在setup中使用data和methods
  • setup中this指向undefined
  • setup只能是同步的,不能是异步的

以上就是关于vue3中setup函数的参数有什么,使用要注意哪些的介绍,本文内容仅供参考,有需要的朋友可以借鉴了解看看,希望对大家学习或工作,想要了解更多欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: Vue
相关信息推荐
2022-07-14 17:48:53 
摘要:3种强制将负数转换为正数的方法:1、使用取反运算“-”,语法“-$number”;2、利用“*”或“*=”运算符将原数乘以“-1”,语法“$number*(-1)”或“$number *= -1;”;3、使用abs()函数对原数取绝对值,语法“abs($number)”。
2021-12-31 17:54:40 
摘要:这篇文章我们来了解Python中sum函数的相关内容,sum函数也就是求和函数,在多种运算场景中都能用到,但是对于sum函数的使用,有一些刚接触Python的朋友可能不是很了解,对此本文给大家来讲讲sum函数的正确用法,有需要的朋友可以参考!
2022-06-27 17:37:29 
摘要:bootstrap如何限定日期选择器可选时间范围?下面本篇文章给大家介绍一下方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部