vue组件传参

一、父子组件的定义

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

  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,感谢原博主

原文地址:https://www.cnblogs.com/aidixie/p/10385948.html

时间: 2024-08-30 04:18:00

vue组件传参的相关文章

第八篇:Vue组件传参

组件传参 父传子 1)在子组件内部通过props设置组件的自定义属性 props: ['abc', 'goods'] 2)在父组件渲染子组件是对自定义属性赋值即可 <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/> 示例代码: 子组件示例代码 <template> <div class="goods-box">

Vue 子组件向父组件传参

直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"><

vue 父子组件传参

父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法).而子组件componetA中,声明props参数'msgfromfa'之后,就可以收到父向子组件传的参数了.例子中将msgfromfa显示在<p>标签中.App.vue中 1 1<component-a ms

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

组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式,和各自的优缺点 一.父组件传参到子组件 和 Vue 一样,React 中从父组件到子组件的传参也是通过 props 不过在 Vue 项目中,需要在先组件里定义将要接收的 props,而 React 可以直接获取 而且 props 不光可以接收 Number.String 等基本类型,还可以接收 Fu

前端vue 跨组件传参,cokies,axion

路由跳转 ? 1 2 3 4 5 6 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</rout

组件传参

一.两个平行组件传参 新建bus.js import Vue from 'vue' export var bus = new Vue() App.vue里created方法里定义事件 import { bus } from 'bus.js' // ... created () { bus.$on('tip', (text) => { alert(text) }) } Test.vue组件内调用 import { bus } from 'bus.js' // ... bus.$emit('tip'

Vue路由传参的几种方式

原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具体区分和使用后续分析. 参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html params传参(url中显示参数)

跨组件传参,cookies组件,axios组件

路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

1218 组件分类,组件传参

目录 昨日内容 组件 1.概念 2.组件分类 特点 根组件 局部组件 全局组件 3.组件传参 父传子 子传父 作业 Vue项目环境的搭建 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue基础总结 昨日内容 """ 1.表单指令: v-model="变量" 变量与value有关 普通:变量就代表value值 单选框:变量为多个单选框