Vue3.x - setup使用

2021-11-06 19:35:15 阅读：183 来源： 互联网

标签：Vue3 return name setup props send 使用组件

setup函数返回值

返回一个对象，则对象中的属性、方法在模板中可以直接使用。

setup(){
    function send() {
      console.log("hello setup")
    }
    let name = "hzc";
    let age = 18;
    return{
      name,
      age,
      send
    }
  }

setup函数参数

props参数
值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

<Student msg="hello"></Student>

export default {
  name: "Student",
  props:['msg'],
  setup(props,context){
    console.log(props.msg);
  }
}

context：上下文对象

attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots.

<Student>
    <template v-slot:slotOne>
      <span>这是一个插槽</span>
    </template>
</Student>


<template>
  <slot name="slotOne"></slot>
</template>

emit: 分发自定义事件的函数, 相当于 this.$emit

<Student @test="show"></Student>
setup(){
    function show(value) {
      alert(`我调用了App组件的方法，App组件收到的值为${value}`)
    }
    return{
      show
    }
  }



<template>
  <button @click="send">调用App组件方法像父组件传值</button>
</template>
export default {
  name: "Student",
  emits:['test'],
  setup(props,context){
    function send() {
      context.emit("test",666)
    }
    return{
      send
    }
  }

注意事项

尽量不要与Vue2.x配置混用
- Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
- 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
- 如果有重名, setup优先。
setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

标签：Vue3,return,name,setup,props,send,使用,组件
来源： https://www.cnblogs.com/IamHzc/p/15518067.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3.x - setup使用

setup函数返回值

setup函数参数

注意事项