vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解

vue3官方文档

  • defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
  • defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。

父传子  - defineProps

父组件

<template>
    <div class="Father">
        <p>我是父组件</p>
        <!--  -->
        <son :ftext="ftext"></son>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import Son from './son.vue'
const ftext = ref('我是父组件-text')
</script>

子组件

<template>
    <div class="Son">
        <p>我是子组件</p>
       <!-- 展示来自父组件的值 -->
       <p>接收到的值：{{ftext}}</p>
    </div>
</template>
<script setup>
import {ref} from 'vue'
// setup 语法糖写法

//defineProps 来接收组件的传值
const props = defineProps({
    ftext: {
        type:String
    },
})
</script>

子传父 - defineEmits

子组件：

<template>
    <div class="Son">
        <p>我是子组件</p>
        <button @click="toValue">点击给父组件传值</button>
    </div>
</template>

<script setup>
import {ref} from 'vue'
// setup 语法糖写法
//用defineEmits()来定义子组件要抛出的方法,语法defineEmits(['要抛出的方法'])
const emit = defineEmits(['exposeData'])

const stext = ref('我是子组件的值-ftext')
const toValue = ()=>{
    emit('exposeData',stext)
}

</script>

父组件：

<template>
    <div class="Father">
        <p>我是父组件</p>
        <!--  -->
        <son @exposeData="getData" :ftext="ftext"></son>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import Son from './son.vue'
const ftext = ref('我是父组件-text')
const getData = (val)=>{
    console.log("接收子组件的值",val)
}
</script>

defineExpose

官方解释：

使用 <script setup> 的组件是默认关闭的(即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定)。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性

子组件：

<template>
    <div>
        <p>我是子组件</p>
    </div>
</template>

<script setup>
import { ref } from 'vue';

    const stext = ref('我是子组件的值')
    const sfunction = ()=>{
        console.log("我是子组件的方法")
    }
    defineExpose({
        stext,
        sfunction
    })
</script>

父组件：

<template>
	<div class="todo-container">
		<p>我是父组件</p>
		<son ref="sonDom"></son>
		<button @click="getSonDom">点击</button>
	</div>
</template>

<script setup>
import { ref ,nextTick} from 'vue';
	import son from './components/son.vue'
	const sonDom = ref(null) //注意这里的命名要和ref上面的命名一致
	const getSonDom = ()=>{
		console.log("sonDom",sonDom.value)
	}

	//直接打印sonDom的值是拿不到的，子组件节点还没生成
	nextTick(()=>{
		console.log("sonDom",sonDom.value)
	})
</script>

到此这篇关于vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）的文章就介绍到这了,更多相关vue3 setup语法糖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3中defineEmits、defineProps 不用引入便直接用

    前言: 最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript,并利用 Composition API 的优势. 比如,下面这种 选项API 方式: export default { props: { name: { type: String, required: true. } }, emits: ['someEvent', 'increaseBy'] }; 我们将它转成 组合API 方式: const props

  • 一文详细聊聊vue3的defineProps、defineEmits和defineExpose

    目录 defineProps defineEmits defineExpose 总结 最近在开发中用到了vue3的defineProps.defineEmits和defineExpose,感觉发现新大陆一般,所以利用闲碎时间对这三个方法做个总结. defineProps const props = defineProps<{ foo: String, bar?: Number }>() defineProps 是vue3的写法并且是一个仅 <script setup> 中可用的编译

  • vue3中使用ref和emit来减少props的使用示例详解

    目录 前言 示例 示例1 示例2 前言 在之前开发vue2项目中,props 属性在组件中经常使用来进行组件通信.现在在开发vue3项目的过程中,我们开发小组渐渐的减少props的使用,转而用ref 和 emit 来代替.缺点不太清楚,但是好处还是挺多的.下面结合实际的开发常见来举例. 示例 示例1 以弹窗组件来说,之前vue2时是通过props属性来控制弹窗的打开,比如下面这个新增弹窗退货的弹窗组件(大多数清空下,新增和修改一般是一个组件) <add-return-goods :visible

  • Vue3中props和emit的使用方法详解

    目录 作用:父组件通过 props 向下传递数据给子组件: 用法1(不指定类型的简单接受): 用法2(接受同时进行类型限制): 用法3(接受同时类型限制+默认值指定): 注意: emit的使用 总结 作用:父组件通过 props 向下传递数据给子组件: 用途:当有一种类型的组件需要被使用多次,每一次的调用都只是特定的地方不同,就好像一张个人简介表,每次填的人的信息都不同,但是结构都是一样的. 用法1(不指定类型的简单接受): 在父组件里面引入子组件,通过子组件的标签属性传递参数,在子组件里面定义

  • vue3.0语法糖内的defineProps及defineEmits解析

    目录 语法糖内的defineProps及defineEmits 1.defineProps 2.defineEmits vue语法糖的说明 语法糖内的defineProps及defineEmits 1.defineProps 获取组件传值 <div :style="fontstyle"> <div class="rate" @mouseout="mouseOut"> <span @mouseover="mo

  • vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解

    vue3官方文档 defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏.他们不需要导入,且会随着 <script setup> 的处理过程一同被编译掉. defineProps 接收与 props 选项相同的值,defineEmits 接收与 emits 选项相同的值. 父传子  - defineProps 父组件 <template> <div class="Father"> &

  • vue3:setup语法糖使用教程

    目录 1.setup语法糖简介 2.setup语法糖中新增的api 2.1defineProps 2.2defineEmits 2.3defineExpose 补充:与普通的script一起使用 总结 1.setup语法糖简介 直接在script标签中添加setup属性就可以直接使用setup语法糖了. 使用setup语法糖后,不用写setup函数:组件只需要引入不需要注册:属性和方法也不需要再返回,可以直接在template模板中使用. <template> <my-component

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • 使用python执行shell脚本 并动态传参 及subprocess的使用详解

    最近工作需求中 有遇到这个情况 在web端获取配置文件内容 及 往shell 脚本中动态传入参数 执行shell脚本这个有多种方法 最后还是选择了subprocess这个python标准库 subprocess这个模块可以非常方便的启动一个子进程,并且控制其输入和输出 Class Popen(args,bufsize = 0,executable=None, stdin =None,stdout =None,stderr =None, preexec_fn = None,close_fds =

  • C# 总结QueueUserWorkItem传参几种方式案例详解

    最近在学习citrix的xenserver6.2的源代码,发现多处用到System.Threading命名空间下的ThreadPool.QueueUserWorkItem方法: public static bool QueueUserWorkItem(WaitCallback callBack, object state); publicstaticbool QueueUserWorkItem(WaitCallback callBack); 参数WaitCallback 本身是一个delegat

  • 无UI 组件Headless框架逻辑原理用法示例详解

    目录 概述 精读 总结 概述 Headless 组件即无 UI 组件,框架仅提供逻辑,UI 交给业务实现.这样带来的好处是业务有极大的 UI 自定义空间,而对框架来说,只考虑逻辑可以让自己更轻松的覆盖更多场景,满足更多开发者不同的诉求. 我们以 headlessui-tabs 为例看看它的用法,并读一读 源码. headless tabs 最简单的用法如下: import { Tab } from "@headlessui/react"; function MyTabs() { ret

  • vuejs路由的传参及路由props配置详解

    vuejs路由的传参及路由props配置详解

    目录 前言 方式1-使用query方式 命名路由 方式2-路由的params参数 query与params的区别 路由的props配置 路由配置的布尔模式 路由配置的对象模式 路由配置函数模式 总结 前言 在Vue项目里,去实现左侧菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等,用的都是前端路由vue-router,它的重要性,不可言喻 下面介绍一下Vue中的路由传参以及路由的prps配置 方式1-使用query方式 这里循环遍历一个列表为例,query的方式,跳转的url后面携带的一

  • vue3 使用setup语法糖实现分类管理功能

    目录 setup语法糖简介 setup语法糖中新增的api 模块简介 分类模块路由 分类列表组件 获取分类列表数据 分类表单组件 setup语法糖简介 直接在 script 标签中添加 setup 属性就可以直接使用 setup 语法糖了. 使用 setup 语法糖后,不用写 setup 函数,组件只需要引入不需要注册,属性和方法也不需要再返回,可以直接在 template 模板中使用. setup语法糖中新增的api defineProps:子组件接收父组件中传来的 props defineE

  • vue3更新的setup语法糖实例详解

    目录 前言 语法糖用法: 语法糖带来的体验 一.组件自动注册 二.属性及方法无需return 三.自动将文件名定义为组件的name属性 1.defineProps 2.defineEmits 3.defineExpose 总结 前言 vue3最近更新了一个setup语法糖,这两天才看到,使用起来雀食很甜,特发个帖子记录下 语法糖用法: // 将 `setup` attribute 添加到 `<script>` 代码块上 // 里面的代码会被编译成组件 `setup()` 函数的内容 // 就是

随机推荐