一、父子组件的定义

  负值组件的定义有两种,我称为常规父子组件和特殊父子组件。

  1.1、常规父子组件

  将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以直接用<自定义标签></自定义标签>样子使用。当前组件为父组件,被引入的组件为子组件。

  引入子组件

  注册子组件

  使用子组件

  1.2、特殊父子组件

  在路由中定义好组件,组件中含有children,页面上通过<router-view></router-view>形式使用,也算是父子组件,当前组件为父组件,router-view路由的为子组件。

  

  在main.vue中引入

  当前的main.vue为父组件,router-view引入的container.vue为子组件。

二、父组件的数据和方法函数传递到子组件

  2.1、常规父组件传参到子组件

  在main.vue父组件上的数据和方法:

  

  在main.vue父组件上传递数据和方法:

  

  在header.vue子组件上引入父组件传递过劳的数据和方法:

  

  在header.vue子组件上使用父组件传递的数据和方法:

  

  2.1、特殊父组件传参到子组件

  在main.vue父组件基本同上,区别在于传递父组件的方法函数时使用“v-on:”或”@“,而不是用“:“

  

  在container.vue子组件上基本相同,区别在于接受父组件传递过来的方法函数不使用props,通过在methods中通过定义一个新方法,在方法体里面写this.$emit(‘testRouter’,’val’),以这种形式获取父组件的方法,在赋值给子组件新定义的方法,注意alert1是父组件中绑定时候自己定义的名字,val若该方法带参数则加上,不带则加空字符串即可。

  

三、子组件传递数据和方法函数到父组件中

  3.1、常规的子组件传递数据和方法到父组件中

   (1)传递数据:子组件主要通过事件传递数据给父组件

  子组件定义一个方法,方法中通过this.$emit(‘transferNum’,this.num)方式发送数据num,父组件中监听transferNum事件,当事件触发时,执行函数,进行赋值。

  子组件的数据和发送数据方法:

  

  父组件中监听子组件中发送函数的方法,并赋值。

  

  

  这样在父组件中就可以使用data中的num这个数据了。

  (2)传递方法:子组件定义好方法,父组件在引用子组件的时候在自定义标签中添加标识符,ref=”child1”,用来表示这个子组件。父组件在methods中定义自己的方法名,方法主体:this.$refs.child1.fun。意思是通过调用$refs中名字叫child1的子组件里的fun方法,赋值给父组件。

  子组件定义方法:

  

  父组件中引用子组件时,添加一个标识符rel=’abc’,注意rel是语法,abc是标识

  

  父组件中定义一个方法,主体内容如图,表示方法就是标识为aaa的子组件里的setFun方法。

  

  调用gerFun方法

  

  3.2、特殊的子组件传递数据和方法到父组件中

  经过测试,特殊的子组件传递数据和方法到父组件中与普通的子组件传递数据和方法到父组件中是一样的。

四、兄弟组件传值

  4.1 兄弟组件引入

  两个组件作为子组件被同一个父组件所引用

  

  

  

  4.2、main.js里的设置

  

  4.3、两个兄弟组件之间的语法

  组件Header.vue需要定义一个发送数据的方法,此处sendMsg是定义在此的方法,页面点击时候触发此函数,函数主体,通过Bus中央事件总线用$emit发送一个send事件,事件的功能就是传送一个“hello world!”的数据,区分sendMsg和send,前者是当前页面的点击事件,后者是发送出去,需要其他组件监听的事件。

  

  

  组件Copy.vue中,在生命周期为created的时候,通过Bus中央事件总线用$on监听组件1中发送的send事件,用一个带参数的回调函数,接收穿过来的值,参数即为传的值 ,把值赋值给当前组件的变量。

  

  

  

  兄弟组件间就不互相调用对方的方法了,多次使用的话就单独封装成一个方法在独立的js格式文件中,到时直接调用。

主要参照博客:https://blog.csdn.net/a15088712506/article/details/78967937,感谢原博主

vue组件传参的更多相关文章

  1. vue 组件传参

    路由配好了 再传个参呗 注:组件信息流转的时候只能单向1 > 父子传参传参:通过属性prop:传递数据 a.父组件传参给子组件 子组件: <ul> <li v-for=&quo ...

  2. vue 组件传参及跨域传参

    可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...

  3. 前端vue组件传参

    ## 路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name ...

  4. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  5. vue 父子组件传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  6. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  7. vue父组件传参给子组件

    其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...

  8. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

  9. 从 Vue 的视角学 React(四)—— 组件传参

    组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...

随机推荐

  1. 关于ES6新增的东西

    查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/ Chrome.MS Edge.Firefox.Safari.Node和其它很多环境都已 ...

  2. HTML5的postMessage使用记要////////////////////////////zzzzzzzz

    2014-11-09 20:17:27http://jo2.org/html5-js-postmessage-tips/--点击数:2710     HTML5提出了一个新的用来跨域传值的方法,即po ...

  3. UVA 11489 - Integer Game(找规律)

    题目链接 #include <cstdio> #include <cstring> #include <string> #include <cmath> ...

  4. GitHub上排名前100的Android开源库介绍(来自github)

    本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍,至于排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果,然后过滤了 ...

  5. Http和Socket连接

    转自http://hi.baidu.com/%D2%B9%D1%A9%B3%E6/blog/item/d6a72d2bbf467cf2e7cd406d.html 相信不少初学手机联网开发的朋友都想知道 ...

  6. hadoop之hdfs学习

    简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Go ...

  7. 跨域请求jQuery的ajax jsonp使用常见问题解答

    前天在项目中写了ajax jsonp的使用,出现了问题:能够成功获得请求结果,但没有运行success方法,直接运行了error方法提示错误--ajax jsonp之前并没实用过.对其的理解为跟普通的 ...

  8. InnoDB 索引原理

    InnoDB索引原理 索引能够提高访问的速率 B+树索引(最为常用和最为有效).全文索引.哈希索引. 数据库中的B+树索引可以分为聚集索引和辅助索引,但是不管是聚集还是辅助的索引,其内部都是B+树,是 ...

  9. RedissonLock分布式锁源码分析

    最近碰到的一个问题,Java代码中写了一个定时器,分布式部署的时候,多台同时执行的话就会出现重复的数据,为了避免这种情况,之前是通过在配置文件里写上可以执行这段代码的IP,代码中判断如果跟这个IP相等 ...

  10. MySQL数据库常用命令和概念 (1)

    一.数据库的创建: 1.创建一个名称为mydb1的数据库 create database mydb1; 2.创建一个使用utf8字符集的mydb2数据库. create database mydb2 ...