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

组件之间传值

时间:2022-10-14 14:12:49浏览次数:45  
标签:接收 之间 组件 rightFour holder 传值 页面

一直搞不清楚父子组件之间传值是怎么传与接收的,这里做个笔记,案例比较复杂,涉及四个页面,第一部分跨页面传值;第二部分只有两个页面之间传。

页面关系:index是主页面,是leftFour和rightFour页面的父组件,leftFour和rightFour是子组件;同时rightFour是holder的父页面,holder是镶嵌在rightFour的子组件。

业务需求:点击左边,云台要能控制夜视视频;点击右边的原始监控视频,云台不能控制

业务逻辑:夜视视频后台传值类型type:0,原始监控type:1; holder可根据获取的type云台进行判断是否可操作。【这里只是为了搞清楚组件之间传值,所以下面不做完整业务,只获取type】

问题:1、父子组件之间如何传值、如何接收;2、holder页面与leftFour页面之间隔离一个rightFour页面,如何跨页面传值与接收。

代码逻辑:leftFour不能直接传值给holder进行判断,但是leftFour和rightFour都是index的子组件,(1)可将index作为桥梁(leftFour传值给index,index再传给rightFour)把type传到rightFour,(2)rightFour再把type给它的子组件holder

与各组件有关的代码:

(1)leftFour传值给index(子组件传值,父组件接收):

a. 子组件用$emit自定义方法传值给父组件

父组件接收值:

 

 b. index传值给rightFour(父组件传值,子组件接收):

父组件通过$refs自定义方法传值给子组件

子组件接收:

以上是子父组件之间传值与接收都是通过自定义方法(子传父:$emit ; 父传子:$refs)

(2)rightFour传值给holder(父组件传值,子组件接收

rightFour页面在组件holder处通过自定义动态属性绑定参数传给子组件

子组件接收:通过props接收值,可在created()中打印是否成功传入与接收

这里父子组件传值是通过属性传值和props(父组件传值:动态属性;子组件接收:props)

 其实上面也就只有两种传值类型:子组件传值给父组件和父组件传值

标签:接收,之间,组件,rightFour,holder,传值,页面
From: https://www.cnblogs.com/xz1005xfx/p/16791419.html

相关文章

  • APICloud AVM框架 封装虚拟数字键盘组件
    AVM(Application-View-Model)前端组件化开发模式基于标准WebComponents组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完全兼容WebComponents标......
  • Python爬虫之scrapy_splash组件的使用
    scrapy_splash组件的使用学习目标了解scrapy_splash组件的作用了解scrapy_splash组件的使用1.什么是scrapy_splash?scrapy_splash是scrapy的一个组件scrapy-splash加载js......
  • APICloud AVM 框架 封装树形分类选择组件 组件递归调用
    由于项目中,需要用到追加表单项目的功能,而表单项目在PC端是树形列表的形式展现,而且要实现多选功能,依上述需求开发了树形分类选择组件。组件开发中用到的知识要点是:组件递归......
  • Unity应用在手机息屏或切入后台时与正常运行之间的区别
    1)Unity应用在手机息屏或切入后台时与正常运行之前的区别​2)PSD转Prefab方案的流程3)HUDUI的资源加载问题4)2021.3Android从AssetBundle中加载视频播放失败问题这是第310......
  • Gitlab关闭停用其他不需要的组件
    默认运行的组件[root@gitlabopt]#gitlab-ctlstatusrun:alertmanager:(pid3474)1289193s;run:log:(pid1915)1260609srun:gitaly:(pid3581)1289192s;ru......
  • React组件之间的通信方式总结(下)
    一、写一个时钟用react写一个每秒都可以更新一次的时钟importReactfrom'react'importReactDOMfrom'react-dom'functiontick(){letele=<h1>{new......
  • 界面组件DevExpress WinForms v22.1 - 类office功能全新升级
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office......
  • vant2 List 组件 下拉加载 onLoad
    ps:loadingfinishedonLoad两个变量一个函数;asynconLoad(){console.log("onload");//异步更新数据//setTimeout仅做示例,真实场景中一般为......
  • vue3 父子组件通信
    1.props父组件传参不变,子组件接收: <p>{{props.abc}}</p> <p>{{props.msg}}</p> constprops=defineProps({msg:{type:String,required:......
  • ogg不同版本之间同步
    环境:主库ogg版本:21C从库ogg版本:12C 同步遇到的问题:2022-10-1314:52:48ERROROGG-02598File/goldengate12c/dirdat/cp000000000,withtrailformatrelea......