首页 > 其他分享 >组件之间的传值

组件之间的传值

时间:2022-09-29 20:59:09浏览次数:52  
标签:自定义 之间 参数 props 组件 默认值 传值

 子组件传值给父组件

  子组件模板中使用$emit() 来定义自定义事件,$emit() 有两个参数,

        第一个参数为自定义的事件名称;

        第二个为需要传递给父组件的参数;

  父组件在子组件的标签处使用@绑定子组件定义的事件,用一个方法来监听子组件的事件是否被调用,

  来接收子组件传输的参数,实现通信

  

  

   到此,子组件到父组件的传值完成啦!!!

 父组件传值给子组件

    父组件主要是通过以属性的形式将值绑定到子组件身上

    子组件通过props接收参数;props是一个只读属性,不能进行修改;props可以是数组也可以是对象

  两者的区别:

    数组:不能设置默认值,数据类型

    对象:可以设置默认值,数据类型;但书写较复杂

    

  以上,就是要介绍的两个组件与组件之间的传值方式啦

 

 

 

  

 

标签:自定义,之间,参数,props,组件,默认值,传值
From: https://www.cnblogs.com/yule-i7/p/16742979.html

相关文章

  • vue 动态组件component :is
    示例<componentv-bind:is="currentComponent"></component>currentComponent是要展示的组件,根据具体代码逻辑,currentComponent赋值为不同的组件在切换时保持组件状态,......
  • 在父组件中监听子组件页面是否加载完毕
    在父组件中监听子组件页面是否加载完毕//Parent.vue<Child@mounted="doSomething"/>//Child.vuemounted(){this.$emit("mounted");}//Parent.vue<C......
  • 简单组件讲解
    在编程阶段,会遇到有些页面的某一区域的布局或数据显示类似;那么我们就可以复用这一段代码;在使用原生JS编程时,我们习惯是将代码抽出来自成一个文件,需要时引入即可。而在v......
  • Get和Post的参数传值
    1.get是从服务器上获取数据,post是向服务器传送数据。2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过......
  • vue3 在setup 使用provide inject 实现响应式传值
    provide与inject主要用于从父组件向子组件传递数据。在2.0我们通常用props接收来自父组件的参数,但是一个要从父子组件传递到孙子组件,这种情况就得从父组件到子组件,再从子......
  • 修改生产订单组件——CO_XT_COMPONENT_CHANGE
    修改组件仓库的范例DATA:lv_poTYPEcoxt_ord_key,ls_componentTYPEcoxt_s_ord_comp_key,ls_requTYPEcoxt_s_quantity,ls_requx......
  • drf之请求与响应,drf之视图组件,2个视图基类
    1.drf之请求与响应在继承drf中的APIView时Request它的请求对象request就不是原来的那个request了(具体去看APIView源码分析),所以没钱请求的request都是一个新的对象,这......
  • preventDefault()、stopPropagation()、return false 之间的区别
    “returnfalse”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢......
  • React函数组件和类组件的区别
    区别函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。区别函数组件类组件是否有 ​......
  • React+hook+ts+ant design封装一个input和select搜索的组件
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......