setup获取props和自定义事件、通过expose暴露给ref获取属性和方法、setup顶层async、setup返回函数

最新推荐文章于 2024-05-08 16:51:28 发布
最新推荐文章于 2024-05-08 16:51:28 发布
阅读量3.9k 收藏 4
点赞数 2
分类专栏： Vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45605541/article/details/127986919
版权

文章目录

1. setup获取props和自定义事件

child 组件：

<template>
  <div>
    <h3>我是child组件 -- {{ title }}</h3>
    <button @click="setTitle">修改父title中的数据</button>
  </div>
</template>

<script>
export default {
  // props单向数据流，子不能修改父
  // 写法1：
  // props: ['title'],

  // 写法2：
  props: {
    title: {
      type: String
    }
  },
  // setup里面不能使用this,在此处this它的指向为undefined
  // 参数1：props对象，可以用它来接受props数据，但是此对象一定不能解构
  // 参数2：context对象，里面包含了 slots emit expose attrs

  setup(props, { emit }) {
    console.log(props.title)
    // console.log(slots)
    const setTitle = () => {
      // 发送一个自定义事件，让父组件去绑定实现，这样完成修改title
      emit('onSetTitle', Date.now() + ' - @@')
    }

    return { setTitle }
  }
}
</script>

<style lang="scss" scoped>

</style>

父组件：

<template>
  <div>
    <child  :title="title" @onSetTitle="setTitle">aaaa</child>
  </div>
</template>

<script>
import { ref } from 'vue'
import child from './components/child.vue'
export default {
  components: { child },
  setup() {
    const title = ref('我是父组件标题')

    const setTitle = tit => {
      title.value = tit
    }

    return { title, setTitle }
  }
}
</script>

<style lang="scss" scoped></style>

在这里插入图片描述

2. 通过expose暴露给ref获取属性和方法

child组件：

<template>
  <div>
    <h3>我是child组件 -- {{ title }}</h3>
    <button @click="setTitle">修改父title中的数据</button>
  </div>
</template>

<script>
export default {
  // props单向数据流，子不能修改父
  // 写法1：
  // props: ['title'],

  // 写法2：
  props: {
    title: {
      type: String
    }
  },

  // setup里面不能使用this,在此处this它的指向为undefined
  // 参数1：props对象，可以用它来接受props数据，但是此对象一定不能解构
  // 参数2：context对象，里面包含了 slots emit expose attrs
  setup(props, { emit, expose }) {
    console.log(props.title)
    const setTitle = () => {
      // 发送一个自定义事件，让父组件去绑定实现，这样完成修改title
      emit('onSetTitle', Date.now() + ' - @@')
    }

    // expose 如果你不用它，则在父组件中使用ref得到当前的实例，并且里面所有的方法和属性你都能调用，没有封装性。使用它后，你可以指定需要暴露给父组件ref调用的方法或属性。
    expose({
      name: 'abc'
    })

    return { setTitle }
  }
}
</script>

<style lang="scss" scoped>

</style>

父组件：

<template>
  <div>
    <child ref="childRef" :title="title" @onSetTitle="setTitle">aaaa</child>
  </div>
</template>

<script>
import { ref } from 'vue'
import child from './components/child.vue'
export default {
  components: { child },
  setup() {
    const title = ref('我是父组件标题')
    const childRef = ref(null)

    const setTitle = tit => {
      title.value = tit

      console.log(childRef.value)
    }

    return { title, setTitle, childRef }
  }
}
</script>

<style lang="scss" scoped></style>

在这里插入图片描述

3. setup顶层async

当 setup 需要返回一个 promise 对象时，即在顶层 setup 前添加 async 必须使用 Suspense 包裹，否则会报错。也就是说，当你的 async 不是加在顶层 setup 上时，不用拿 Suspense 包裹。

子组件：

<template>
  <div>
    <h3>我是child组件</h3>
    <button>修改父title中的数据</button>
  </div>
</template>

<script>
export default {
  // setup需要返回一个 {} | ()=>{} | promise=> 必须使用 Suspense包裹
  // 顶层async
  async setup() {
    return {  }
  }
}
</script>

<style lang="scss" scoped></style>

父组件：

<template>
  <div>
    <Suspense>
        <child />
    </Suspense>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  components: { child },
  setup() {
    return {}
  }
}
</script>

<style lang="scss" scoped></style>

在这里插入图片描述

于是我们就可以在子组件中通过 axios 进行网络请求。

子组件：

<template>
  <div>
    <h3>我是child组件</h3>
    <button>修改父title中的数据</button>
  </div>
</template>

<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'
export default {
  // setup需要返回一个 {} | ()=>{} | promise=> 必须使用 Suspense包裹
  // 顶层async
  async setup() {
    let films = ref([])

    onMounted(async () => {
      let ret = await axios.get(
        'https://api.iynn.cn/film/api/v1/getNowPlayingFilmList?cors=T&cityId=110100&pageNum=1&pageSize=10'
      )
      films.value = ret.data.data.films
    })

    return { films }
  }
}
</script>

<style lang="scss" scoped></style>

父组件：

<template>
  <div>
    <Suspense>
        <child />
    </Suspense>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  components: { child },
  setup() {
    return {}
  }
}
</script>

<style lang="scss" scoped></style>

在这里插入图片描述

异步组件 + setup 配置顶层 async + Suspense 组件中的 default 和 fallback：

子组件：

<template>
  <div>
    <h3>我是child组件</h3>
    <button>修改父title中的数据</button>
  </div>
</template>

<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'
export default {
  // setup需要返回一个 {} | ()=>{} | promise=> 必须使用 Suspense包裹
  // 顶层async
  async setup() {
    let films = ref([])

    onMounted(async () => {
      let ret = await axios.get(
        'https://api.iynn.cn/film/api/v1/getNowPlayingFilmList?cors=T&cityId=110100&pageNum=1&pageSize=10'
      )
      films.value = ret.data.data.films
    })

    return { films }
  }
}
</script>

<style lang="scss" scoped></style>

父组件：

<template>
  <div>
    <Suspense>
      <!-- 成功显示的 -->
      <template #default>
        <child />
      </template>
      <!-- 加载中显示的 -->
      <template #fallback>
        <loading />
      </template>
    </Suspense>
  </div>
</template>

<script>
import { ref, defineAsyncComponent } from 'vue'
// 异步组件 + setup配置选项顶层 async  配合 Suspense 组件
const child = defineAsyncComponent(() => import('./components/child.vue'))
export default {
  components: { child },
  setup() {
    return {}
  }
}
</script>

<style lang="scss" scoped></style>

在这里插入图片描述

4. setup返回函数

返回函数 ，它就相当于 render方法，不需要 template 模板。

子组件：

<script>
import { ref, h } from 'vue'
export default {
  // 返回函数  它就相当于 render方法，模板,不需要template
  setup() {
    return () => {
      return h('div', null, [
        h('h3', null, '我是一个标题'),
        h(
          'button',
          {
            onClick: () => console.log('我是点击事件')
          },
          '按钮'
        )
      ])
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child />
  </div>
</template>

<script>
// import { ref } from 'vue'
import child from './components/child.vue'
export default {
  components: { child },
  setup() {
    return {}
  }
}
</script>

<style lang="scss" scoped></style>

在这里插入图片描述

也可以用 jsx 语法实现上面的需求：

父组件：

<template>
  <div>
    <child />
  </div>
</template>

<script>
import child from './components/child'
export default {
  components: { child },
  setup() {
    return {}
  }
}
</script>

<style lang="scss" scoped></style>

子组件（快捷键 rfc）：

const Child = () => {
  return (
    <div>
      <h3>jsx</h3>
      <button>jsx</button>
    </div>
  )
}

export default Child

在这里插入图片描述

月光晒了很凉快
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的setup函数
qq_42309685的博客
08-13 1万+
组合式API（setup） 作用：将同一逻辑关注点代码收集 setup 使用 setup 函数时，它将接受两个参数 props context Props props 是 setup 函数中的第一个参数，props 是用 Proxy 包裹的一个响应式数据，当传入新的 props时，它将被更新。 需要注意的是：因为 props 是响应式的，不能使用 ES6 结构，因为解构会消除 props 的响应性。 如果需要解构 props，可以在 setup 函数中使用 toRef 函数来完成此操作： i
【vue3】vue3 setup如何使用props？
热门推荐
qq_39576711的博客
03-18 5万+
setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。 他接受两个参数： {Data} props {SetupContext} context 在setup里边，第一个参数就是props，下面来看示例。 子组件propsTest.vue： <script lang="ts"> import { toRefs } from 'vue' interface Data { [key:string]:unknown } export defaul
vue3学习 setup，props，context
weixin_48789376的博客
07-28 8154
setup 函数 1、执行时机在 beforeCreate 和 created这两个钩子函数之前，是最早执行的，在程序运行中，setup函数只执行一次 2、在setup中没有this , 打印返回undefined vue3里的生命周期： ① 可以和vue2里一样选项式写法，和setup平级， beforeCreate/ created/ beforeMount/ mounted / beforeUpdate / updated / beforeUnmount / unmounted ② 可以在setup里
【Vue3】setup通过defineProps获取props为null
最新发布
qq_38196449的博客
05-08 338
其实原因很简单，defineProps只在setup语法糖中好使，也就是的方式
vue3基础之setup中的props和自定义事件
weixin_64740434的博客
07-30 1607
使用setup中默认存在的defineEmits方法接受自定义事件我们在defineEmits的泛型中书写接口来接受自定义事件接口中每接收一个自定义事件,都是函数类型,参数固定第一个值event值是自定义事件名称,后边参数都是自定义事件接收的参数,这个函数类型返回值一般都是voiddefineEmits返回一个emit方法,方便我们调用自定义事件也可以在模板中直接使用 组件实例上的 $emit 调用。
Composition API之setup函数的基本使用
weixin_47342392的博客
09-14 861
Composition API之setup函数的基本使用
React props和state属性的具体使用方法
08-27
React props 和 state 属性的具体使用方法 在 React 中，props 和 state 是两个非常重要的概念，它们都是 React 组件的核心组成部分。本篇文章将详细介绍 React props 和 state 属性的具体使用方法，并通过实例代码...
vue props对象validator自定义函数实例
10-15
Vue.js 是一款流行的前端JavaScript框架，它允许开发者创建可复用的组件，这些组件可以通过属性(props)接收外部数据。在Vue中，`props`是组件间通信的一种方式，父组件可以向子组件传递数据。而`validator`是Vue中一...
【JavaScript源代码】Vue3中SetUp函数的参数props、context详解.docx
12-29
Vue3中的`setup`函数是Composition API的核心部分，它允许开发者在组件的生命周期早期定义状态、响应式属性和方法。这个函数接收两个参数：`props`和`context`。 1. **props**： - `props`是一个对象，用于接收父...
在vue中通过render函数给子组件设置ref操作
01-18
正常我们的写法是，这样ref不会生效，h是作用在渲染的时候的，而ref是渲染之后才创建的，因此在h函数中使用ref是无效的。 render: (h, params) => { return h(expandRow, { ref:'child', props: { row: params....
setup语法糖中的props和emit
weixin_42943920的博客
06-03 449
setup语法糖中的props和emit
vue setup prop 声明
ahuangwine的博客
07-21 73
【代码】vue setup prop 声明。
setup与prop和props联合使用法
weixin_40945354的博客
08-18 1182
<!DOCTYPE html> <div id = "app"> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { title: 'Jave 无难事' }
vue3新增特性setup()用法＜与vue2对比＞
mkbird的博客
05-09 8061
文章目录setup()执行时机setup()的第一个形参propssetup()的第二个形参contextreactive()基本语法定义响应式数据供 template 使用ref()基本语法在 template 中访问 ref 创建的响应式数据在 reactive 对象中访问 ref 创建的响应式数据isRef()toRefs() setup() setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。 执行时机 s
setup 的两个参数(props,context(attrs,slots,emit)),以及用 prop和emit 实现父子组件传值
LL22222222的博客
10-10 388
默认插槽
Vue3的组合api(setup)
weixin_56305645的博客
03-30 2218
setup setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。 调用时机 创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用 注意事项： this在setup()中不可用 参数： 该函数接收 props 作为其第一个参数：watchEffect 或 watch 会观察和响应 props 的更新 然而不要解构props对象，那样会使其失去...
Vue3----props和emit的使用
测试
12-20 8975
props和emit
vue3在 setup 中使用 props
geinvse_seg的博客
03-06 1029
vue3在 setup 中使用 props 记录学习和开发中遇到的问题 之前我尝试在 setup 中使用 props 是这样的 export default defineComponent({ setup(props: any) { console.log(props.id) // 输出 undefined } }) 然而 却输出 undefined ，通过思考和查阅资料，与 vue2 做对比，少了 props 声明一步 加上声明就可以了 export default
组件间对于setup中数据进行传递获取
qq_28846389的博客
03-12 2896
vue2中组件间数据传输 子组件 <input type="text" :value="modelValue" @input="onInput"> props: { modelValue: String }, methods: { onInput (e) { this.$emit('form-input1', e.target.value) } } 父组件 <ValideInput1 @form-input1="formInput1" v-m
vue中自定义事件和props中传递函数类似
03-08
在 Vue 中，自定义事件和 props 中传递函数都是用来实现组件之间的通信。自定义事件是通过 $emit 方法触发事件，然后在父组件中监听该事件并执行相应的方法。而 props 中传递函数则是将父组件中的方法传递给子组件，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值