vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）

Jocelyn_书 2023-04-19 原文

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>

defineExpose defineProps code gt lt vue.js 前端 vue3

有关vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）的更多相关文章

ruby - 树顶语法无限循环 - 2
我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby - 覆盖相似的方法，更短的语法 - 2
在Ruby类中，我重写了三个方法，并且在每个方法中，我基本上做同样的事情:classExampleClassdefconfirmation_required?is_allowed&&superenddefpostpone_email_change?is_allowed&&superenddefreconfirmation_required?is_allowed&&superendend有更简洁的语法吗？如何缩短代码？最佳答案如何使用别名？classExampleClassdefconfirmation_required?is_a
ruby 语法糖 : dealing with nils - 2
可能已经问过了，但我找不到它。这里有2个常见的情况(对我来说，在编程Rails时......)用ruby编写是令人沮丧的:"astring".match(/abc(.+)abc/)[1]在这种情况下，我得到一个错误，因为字符串不匹配，因此在nil上调用[]运算符。我想找到的是比以下内容更好的替代方法:temp="astring".match(/abc(.+)abc/);temp.nil??nil:temp[1]简而言之，如果不匹配，则简单地返回nil而不会出错第二种情况是这样的:var=something.very.long.and.tedious.to.writevar=some
ruby - Ruby 语法糖有 "rules"吗？ - 2
我正在学习Ruby的基础知识(刚刚开始)，我遇到了Hash.[]method.它被引入a=["foo",1,"bar",2]=>["foo",1,"bar",2]Hash[*a]=>{"foo"=>1,"bar"=>2}稍加思索，我发现Hash[*a]等同于Hash.[](*a)或Hash.[]*一个。我的问题是为什么会这样。是什么让您将*a放在方括号内，是否有某种规则可以在何时何地使用“it”？编辑:我的措辞似乎造成了一些困惑。我不是在问数组扩展。我明白了。我的问题基本上是:如果[]是方法名称，为什么可以将参数放在括号内？这看起来几乎——但不完全是——就像说如果你有一个方法Foo.d
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ruby - 如何让Ruby捕获线程中的语法错误 - 2
我正在尝试使用ruby编写一个双线程客户端，一个线程从套接字读取数据并将其打印出来，另一个线程读取本地数据并将其发送到远程服务器。我发现的问题是Ruby似乎无法捕获线程内的错误，这是一个示例:#!/usr/bin/rubyThread.new{loop{$stdout.puts"hi"abc.putsefsleep1}}loop{sleep1}显然，如果我在线程外键入abc.putsef，代码将永远不会运行，因为Ruby将报告“undefinedvariableabc”。但是，如果它在一个线程内，则没有错误报告。我的问题是，如何让Ruby捕获这样的错误？或者至少，报告线程中的错误？
ruby -::在 Ruby 语法中是什么意思？ - 2
这个问题在这里已经有了答案:WhatisRuby'sdouble-colon`::`?(12个答案)关闭8年前。什么是::？@song||=::TwelveDaysSong.new
ruby - ruby 乘法语句中星号中断语法前的空格 - 2
在添加一些空格以使代码更具可读性时(与上面的代码对齐)，我遇到了这个:classCdefx42endendm=C.new现在这将给出“错误数量的参数”:m.x*m.x这将给出“语法错误，意外的tSTAR，期待$end”:2/m.x*m.x这里的解析器到底发生了什么？我使用Ruby1.9.2和2.1.5进行了测试。最佳答案 *用于运算符(42*42)和参数解包(myfun*[42,42])。当你这样做时:m.x*m.x2/m.x*m.xRuby将此解释为参数解包，而不是*运算符(即乘法)。如果您不熟悉它，参数解包(有时也称为“spl
语法类似于 GitHub Flavored Markdown 的 Ruby markdown 解释器？ - 2
我使用Jekyll运行博客，并认为我会解决RedcarpetMarkdown解释器，因为它是developedandusedbyGitHub.好吧，我只是碰巧遇到了一个错误，去检查问题，然后foundthis.Maintainersays,"Asyouprobablyhavenoticed(harharharhar)Idon'thavetimetomaintainRedcarpetanymore.It'snotapriorityforme(IfindMarkdownthoroughlyboring)andit'snotapriorityforGitHub,becausewenolong

vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）

有关vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）的更多相关文章

随机推荐