setup() 写法的组件

前言

vue 官方建议，如果是单文件组件，则推荐使用 <script setup>的写法。而 setup()钩子的写法用于：

1. 在非单文件组件中使用组合式 API 的时候
2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时

   内部数据

   内部数据要在 setup函数中返回才能在模版中使用。

   import { ref } from "vue";
   export default {
   template: `
   <div>
    {{ count }}
   </div>
   `,
   setup() {
    const count = ref(0);
    return {
      count
    }
   }
   }

   内部方法

   内部方法也要在 setup中返回才能使用。

   import { ref } from "vue";
   export default {
   template: `
   <div>
    {{ count }}
    <button @click="add">加一</button>
   </div>
   `,
   setup() {
    const count = ref(0);
    const add = () => {
      count++;
    }
    return {
      count,
      add
    }
   }
   }

   外部数据

   外部数据通过 setup()函数的第一个参数传递进去。在 props选项上定义。
   在模版中访问外部数据时直接访问即可，在 setup()函数内访问时通过第一个参数访问。

   import { ref } from "vue";
   export default {
   template: `
   <div>
    {{ count }}
    <button @click="add">加一</button>
   </div>
   `,
   props: ["title"],
   setup(props) {
    const count = ref(0);
    const add = () => {
      count++;
    }
    console.log(props.title);
    return {
      count,
      add
    }
   }
   }

   透传 Attributes

   在 setup()函数里面访问透传 attributes 的话，可以和 <script setup>一样使用 useAttrs()API。也可以从第二个参数 ctx 上下文读取 attrs属性。

   import { useAttrs } from "vue";
   export default {
   setup(props) {
    const attrs = useAttrs();
   }
   }

   export default {
   setup(props, ctx) {
    // 透传 attribute 被暴露为 ctx.attrs
    console.log(ctx.attrs)
   }
   }

在 setup()函数用法中禁用 Attribute 继承的话，直接写选项式属性 inheritAttrs即可。

export default {
  inheritAttrs: false,
  setup(){
  }
}

抛出事件

在 setup()中抛出事件的话，需要使用 setup()函数的第二个参数 ctx即 context上下文的意思。
还需要在 emits选项定义事件。

import { ref } from "vue";
export default {
  template: `
<div>
  {{ count }}
  <button @click="add">加一</button>
</div>
`,
  emits: ["add-one"],
  setup(props, ctx) {
    const count = ref(0);
    const add = () => {
      count++;
      ctx.emit("add-one");
    }
    return {
      count,
      add
    }
  }
}

使用组件

在 setup()函数里面使用 app.component()全局注册的组件的话，直接使用即可。
如果是要使用局部的组件，需要注册后使用。要引入组件并在 components选项中定义，然后才能在模版中使用。

import ComponentA from "./Component.vue";
export default {
  template: `
    <div>
      <ComponentA />
    </div>
  `,
  components: {
    ComponentA: ComponentA,
  }
}

生命周期

setup()函数的生命周期和<scirpt setup>的生命周期函数一样，都是从 Vue 里面获取对应的函数，传递回调执行。

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log(`the component is now mounted.`)
    })
  }
}
</script>

暴露数据

在子组件使用 ref 属性的时候，可以直接拿到子组件的实例，此时可以访问子组件的一些数据和方法。使用 setup()方式的组件和 基于选项式的组件一样，实例就是组件内部的 this。可以访问子组件全部的数据。