vue3-setup语法糖 - 父子组件之间的传值

这篇具有很好参考价值的文章主要介绍了vue3-setup语法糖 - 父子组件之间的传值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

近期学习 vue3 的父子组件之间的传值,发现跟vue2的并没有太大的区别,然后发现网络上很少基于setup语法糖的教程,我这边总结一下,希望对大家有所帮助。

一、父组件向子组件传值

父组件向子组件传值的时候,子组件是通过props来接收的,然后以变量的形式将props传递到setup语法糖果中使用(defineEmits的到来!)。如下图所示:

1、父组件传递方式

<template>
  <div class="hello">
  我是父组件
  <!-- 父组件通过:变量(这里是info)绑定值 -->
   <Child :info="parentMsg"></Child>
  </div>
</template>

<script setup>
import Child from './Child'
import {ref} from 'vue'
const parentMsg=ref('父组件传递值是a')

</script>

<style scoped>

</style>

2、子组件接收方式和使用

<template>
<!-- info是父组件传递过了的值 -->
  <div>我是子组件拿到了父组件的值是{{info}}</div>
</template>

<script setup>
import { toRefs, defineProps } from 'vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: String,
})
//使用父组件传递过来的值
const {info} =toRefs(props)

</script>

<style>

</style>

 3、效果图

vue3-setup语法糖 - 父子组件之间的传值

 文章来源地址https://www.toymoban.com/news/detail-513304.html

 二、子组件向父组件传值

vue3中子组件向父组件传递值和vue2.x的区别是vue2.x使用的是 $emit 而vue3使用的是emit,它们的传值一样都是方法加值,即vue2.x的是this.$emit('方法名','传递的值(根据需要传或者不传)'),vue3的setup语法糖的是defineEmits。vue3的子传父方式如下所示: 

1、子组件的传递方式

<template>
  <button @click="clickChild">点击子组件</button>
</template>

<script setup>
import { defineEmits } from 'vue'
// 使用defineEmits创建名称,接受一个数组
const emit = defineEmits(['clickChild'])
const clickChild=()=>{
  let param={
    content:'b'
  }
  //传递给父组件
  emit('clickChild',param)
}
</script>

<style>

</style>

2、父组件接收与使用

<template>
  <div class="hello">
  我是父组件
  <!-- clickChild是子组件绑定的事件,click是父组件接受方式 -->
   <Child  @clickChild="clickEven"></Child>
 <p>子组件传递的值是 {{result}}</p>
 </div>
</template>

<script setup>
import Child from './Child'
import {ref} from 'vue'
const result=ref('')
const clickEven=(val)=>{
  console.log(val);
  result.value=val.content
}
</script>

<style scoped>

</style>

 3、效果图

vue3-setup语法糖 - 父子组件之间的传值

 

三、父组件获取子组件中的属性值

当时用语法糖时,需要将组建的属性及方法通过defineExpose导出,父组件才能访问到数据,否则拿不到子组件的数据

1、子组件的传递方式

<template>
  <div>
        <h2> 我是子组件</h2>
        <p>性别:{{ sex}}</p>
    </div>
</template>

<script setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
    like:'王者荣耀',
    age:18
})
defineExpose({sex, info})
</script>

<style>

</style>

2、父组件显示方式

<template>
  <div class="hello">
  我是父组件
   <Child ref="testcomRef"></Child>
<button @click="getSonHander">获取子组件中的数据</button>
 </div>
</template>

<script setup>
import Child from './Child'
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander=()=>{
  console.log('获取子组件中的性别', testcomRef.value.sex );
    console.log('获取子组件中的其他信息', testcomRef.value.info )
}
</script>

<style scoped>

</style>

3、效果图

vue3-setup语法糖 - 父子组件之间的传值

 

到了这里,关于vue3-setup语法糖 - 父子组件之间的传值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3组合式api <script setup> props 父子组件的写法

    父组件传入子组个的变量, 子组件是无法直接修改的, 只能通过 emit的方式, 让父组件修改, 之后子组件更新 父组件的写法没有变, 子组件的写法就有很大的变化了

    2024年02月10日
    浏览(43)
  • vue父子组件之间双向数据绑定的(vue2/vue3)

    vue父子组件之间双向数据绑定的四种方法(vue2/vue3) vue考虑到组件的可维护性,是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信(第一种方式),通过这种间接的方式改变父组件的data,从而实现子组

    2024年02月08日
    浏览(76)
  • vue3 组件间通信的方式(setup语法糖写法)

    该方式用于父传子,父组件以数据绑定的形式声明要传递的数据,子组件通过defineProps()方法创建props对象,即可拿到父组件传来的数据。 2. emit方式 emit 方式也是Vue中最常见的组件通信方式,该方式用于 子传父。 3、defineExpose 利用defineExpose+ref 可以得到组件里的方法和变量

    2024年02月12日
    浏览(47)
  • vue3自定义dialog createApp setup语法组件使用element

    目录  index.vue mapDialog.js

    2024年02月14日
    浏览(45)
  • vue3 setup语法糖 使用组件内的路由守卫beforeRouteEnter使用方法

    由于beforeRouteEnter在setup语法糖中是无法使用的,所以需要再起一个script标签 使用defineComponent方式来使用就可以了

    2024年02月11日
    浏览(54)
  • 史上最全的vue中组件之间的传值方式

    重中之重的就是组件之间数据传递的几种方式 Vue2最常见的11种组件间的通讯方式 props $emit / v-on .sync v-model ref(获取子组件的属性和调用子组件方法)本质就是获取到子组件的this $children / $parent(获取子组件(不包括顺孙组件)的数组 / 获取父组件的this) $attrs / $listeners($

    2024年02月03日
    浏览(42)
  • VUE 父子组件、兄弟组件 之间通信 最强详解

    目录 1. 父组件 调用 子组件 内参数/方法 1.1 通过 ref 调用/获取 子组件内参数/方法 2. 子组件 调用 父组件 内参数/方法 2.1 通过 emit 调用 父组件方法 2.2 通过 props 调用 父组件方法/参数 2.3 通过 this.$parent 调用 父组件方法/参数 3. 兄弟组件 通信 3.1 通过 bus 进行 兄弟组件 通信

    2024年02月05日
    浏览(61)
  • vue父子组件之间传值的方法

    父传子 方式: props 效果: 把父组件的 fatherName 属性传入子组件,在子组件中使用 父组件代码: 子组件代码: 子传父 方式: $emit 效果: 在子组件触发事件,修改父组件的fatherName属性 父组件代码: 子组件代码: 兄弟传值 方式: eventBus.js 效果: 任意组件之间相互传值 代

    2024年02月09日
    浏览(46)
  • Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

    目录 前言 父组件传子组件 ---- props 给要传递数据的子组件绑定要传过去的属性及属性值 在子组件中使用props配置项接收 props配置项 子组件传父组件 ---- 组件的自定义事件 子组件向父组件传递数据 通过代码来绑定自定义事件 本文将介绍在Vue中父子组件如何进行通信 这里先介

    2024年02月05日
    浏览(117)
  • 【vue3】基础知识点-setup语法糖

    学习vue3,都会从基础知识点学起。了解setup函数,ref,recative,watch、comptued、pinia等如何使用 今天说vue3组合式api,setup函数 在学习过程中一开始接触到的是这样的,定义数据且都要通过return返回 最新接触到的是这样的 两种不同的写法,那区别是什么呢? 其实在script标签上直

    2024年02月13日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包