vue3-setup语法糖之组件传参(definePropsdefineEmitsdefineExpose)

Posted Jocelyn_书

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3-setup语法糖之组件传参(definePropsdefineEmitsdefineExpose)相关的知识,希望对你有一定的参考价值。

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>

第十二章-语义分析之语法糖去除

 

参考以下博文:

(1)Javac语法糖之内部类

(2)Javac语法糖之EnumSwitch

(3)Javac语法糖之TryCatchFinally 

(4)Javac语法糖之增强for循环 

(5)Javac语法糖之其它 

(6)解语法糖之私有构造函数 

(7)lower类的accessCode解读

(8)invokespecial与invokevirtual指令的区别

 

以上是关于vue3-setup语法糖之组件传参(definePropsdefineEmitsdefineExpose)的主要内容,如果未能解决你的问题,请参考以下文章

Javac语法糖之TryCatchFinally

第十二章-语义分析之语法糖去除

Javac语法糖之EnumSwitch

解语法糖之私有构造函数

Javac语法糖之增强for循环

Java语法糖之泛型与类型擦除