Vue3---浅谈setup函数

太过爱你忘了你带给我的痛 2022-08-28 11:51 188阅读 0赞

setup函数执行时机位于 beforeCreate 和 created 之前。该函数共有两个参数，第一个是props，可以拿到该组件定义的组件参数。第二个参数是一个对象，里面有 attrs、emit、slots、expose四个属性，在写setup函数时，可以通过解构赋值的方式拿到需要使用的属性。

*  emit ：可以向父组件传递自定义事件，即向父组件通信

[官网API/images/20220828/0b55f1dcc4774108b180068370b2f13b.png![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/0b55f1dcc4774108b180068370b2f13b.png][APIhttps_v3.cn.vuejs.org_guide_migration_emits-option.html_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_migration_emits-option.html]      子组件：

<template>
      <div class="hello">
        <h1 @click="emitVal">{
       { name }}</h1>
      </div>
    </template>
    
    <script>
    import { defineComponent, ref } from 'vue'
    export default defineComponent({
      name: 'HelloWorld',
      setup (props, { emit }) {
        const name = ref('LMS')
        function emitVal () {
          emit('sendMsg', name) // 传递自定义事件到父组件
        }
        return {
          name,
          emitVal
        }
      }
    })
    </script>

父组件：

<template>
      <div class="home">
        <h1>{
       { name }}</h1>
        <HelloWorld @sendMsg="sendMsg" />
      </div>
    </template>
    
    <script>
    import { defineComponent, ref } from 'vue'
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default defineComponent({
      name: 'Home',
      components: {
        HelloWorld
      },
      setup () {
        const name = ref('LRT')
        function sendMsg (newName) {
          name.value = newName.value
        }
        return {
          sendMsg,
          name
        }
      }
    })
    </script>

*  attrs ：可获取父组件传递的非props中定义的参数，例如class、id等等

[官网APIhttps://v3.cn.vuejs.org/guide/migration/attrs-includes-class-style.html\#%E6%A6%82%E8%A7%88![icon-default.png?t=L892][icon-default.png_t_L892]https://v3.cn.vuejs.org/guide/migration/attrs-includes-class-style.html\#%E6%A6%82%E8%A7%88][APIhttps_v3.cn.vuejs.org_guide_migration_attrs-includes-class-style.html_E6_A6_82_E8_A7_88_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_migration_attrs-includes-class-style.html_E6_A6_82_E8_A7_88]      子组件：

<template>
      <div></div>
    </template>
    
    <script>
    import { defineComponent } from 'vue'
    export default defineComponent({
      name: 'HelloWorld',
      setup (props, { attrs }) {
        console.log(attrs) // { class、id、address }
      }
    })
    </script>

父组件：

<template>
      <div class="home">
        <HelloWorld class="helloWorld" id="helloWorld" address="China" />
      </div>
    </template>
    
    <script>
    import { defineComponent } from 'vue'
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default defineComponent({
      name: 'Home',
      components: {
        HelloWorld
      }
    })
    </script>

*  slots ：在定义函数式组件时，通过slots来定义组件中的插槽

子组件：

import { defineComponent, h } from 'vue'
    
    export default defineComponent({
      name: 'functionComponent',
      props: {
        name: {
          type: String,
          default: ''
        }
      },
      setup (props, { slots }) {
        return () => h('div', { class: 'fc' }, [
          slots.default({ name: props.name, newName: 'LMS' }),
          h('h1', {}, props.name)
        ])
      }
    })

父组件：

<template>
      <div class="home">
        <FC name="LRT">
          <template v-slot:default="slotParam">
            <h4>{
       { slotParam.name }} - {
       { slotParam.newName }}</h4>
          </template>
        </FC>
      </div>
    </template>
    
    <script>
    import { defineComponent } from 'vue'
    import FC from '@/components/functionComponent.js'
    
    export default defineComponent({
      name: 'Home',
      components: {
        FC
      }
    })
    </script>

*  expose ：对外(父组件)暴露的数据、方法等。如果一个组件不使用 expose 函数对外暴露内容，则对外暴露的默认是 setup 函数中 return 的内容。如果使用了 expose 函数对外暴露内容，那么，父组件只能获取 expose 中对外暴露的内容。另一个使用场景是：如果子组件是函数式组件，那么setup函数只能返回 h 渲染函数，不能返回其他，父组件就不能拿到子组件中其他的数据和方法，此时，在函数式组件中，可以通过expose向外暴露。

子组件：

import { defineComponent, ref, h } from 'vue'
    
    export default defineComponent({
      name: 'functionComponent',
      props: {
        name: {
          type: String,
          default: ''
        }
      },
      setup (props, { slots, expose }) {
        const label = ref('Label')
        function conso () {
          console.log('通过expose向父组件暴露我！')
        }
        expose({ // 由于是函数式组件，无法导出，可通过expose向父组件暴露
          label,
          conso
        })
        return () => h('div', { class: 'fc' }, [
          slots.default({ name: props.name, newName: 'LMS' }),
          h('h1', {}, props.name)
        ])
      }
    })

父组件：

<template>
      <div class="home">
        <FC name="LRT" ref="fc" @click="getSon">
          <template v-slot:default="slotParam">
            <h4>{
       { slotParam.name }} - {
       { slotParam.newName }}</h4>
          </template>
        </FC>
      </div>
    </template>
    
    <script>
    import { defineComponent, ref } from 'vue'
    import FC from '@/components/functionComponent.js'
    
    export default defineComponent({
      name: 'Home',
      components: {
        FC
      },
      setup () {
        const fc = ref(null)
        function getSon () {
          console.log(fc.value.label) // 获取子组件数据
          fc.value.conso() // 调用子组件方法
        }
        return {
          fc,
          getSon
        }
      }
    })
    </script>

[icon-default.png_t_L892]: https://csdnimg.cn/release/blog_editor_html/release1.9.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L892
[APIhttps_v3.cn.vuejs.org_guide_migration_emits-option.html_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_migration_emits-option.html]: /images/20220828/0b55f1dcc4774108b180068370b2f13b.png
[APIhttps_v3.cn.vuejs.org_guide_migration_attrs-includes-class-style.html_E6_A6_82_E8_A7_88_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_migration_attrs-includes-class-style.html_E6_A6_82_E8_A7_88]: /images/20220828/0be7a4a29bba4256bdc010461f5ad3f2.png