vue3 setup语法糖之组件传参(defineProps、defineEmits、defineE

vue3官方文档 

define PR ops &nbs p; 和  defineEm IT s  都是只能在  <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 f rom  './son.vue'
const ftext = ref('我是父组件 -t ext')
</script>

子组件

<template>
    <div class="Son">
        <p>我是子组件</p>
       <!-- 展示来自父组件的值 -->
       <p>接收到的值：{{ftext}}</p>
    </div>
</template>
<script setup>
import {ref} from 'vue'
// setup 语法糖写法
 
//defineProps 来接收组件的传值
const props = defineProps({
    ftext: {
        ty PE :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(['e xp oseData'])
 
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-cont ai ner">
		<p>我是父组件</p>
		<son ref="sonDom"></son>
		<button @click="getSonDom">点击</button>
	</div>
</template>
 
<script setup>
import { ref ,nextTick} from 'vue';
	import son from './ component s/son.vue'
	const sonDom = ref(null) //注意这里的命名要和ref上面的命名一致
	const getSonDom = ()=>{
		console.log("sonDom",sonDom.value)
	}
 
	//直接打印sonDom的值是拿不到的，子组件节点还没生成
	nextTick(()=>{
		console.log("sonDom",sonDom.value)
	})
</script>

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

您可能感兴趣的文章: 一文详细聊聊vue3的defineProps、defineEmits和defineExpose Vue3  defineExpose要在方法声明定义以后使用的教程

总结

以上是 为你收集整理的 vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解 全部内容，希望文章能够帮你解决 vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue3 setup语法糖之组件传参(defineProps、defineEmits、defineE的详细内容...