组件件传值

一.render里面调用属性this.props.color

孙辈的组件下层层传递要很多层所以flux上场了,因为太复杂所以redux上场了。。然后为了提高性能PureRenderMixin跟着上场了。。再然后immutable.js也上场了。。。

二.context方法:

父组件给子组件传递:官网domo里面

父组件里要调用getChildContext和设定childContextTypes

// 通过这个方法去传递属性

getChildContext: function() {
return {
color: "blue",
age:12
};
},
// 传递给子孙属性的类型校验
childContextTypes: {
color: React.PropTypes.string,
age: React.PropTypes.number
},

在子组件内

// 在孙子里面校验祖宗里面的属性
contextTypes: {
color: React.PropTypes.string
},

然后在render里面调用this.context.color可以获取父组件传递的值

console.log(this.context),router是不用父组件getChildContext(内部已经设定好)只需要contextTypes就可以调用了

时间: 2024-10-20 22:58:24

组件件传值的相关文章

从0开始探究vue-组件化-组件之间传值

理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组件化的模块(硬盘.内存等),来拼合成一个完整的电脑. 如图,每一个块都是一个组件,由许许多多的组件拼合而成,可以无限的嵌套下去 组件化的好处 模块复用,提高效率,让重复的代码只写一遍. 预留个性化设置,可以保证模块,既通用,又可变. 提高可维护性,如果一个项目多个页面使用了同一个组件(例如消息弹框)

vue父组件向子组件动态传值的两种方法

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组   父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu

vue 兄弟组件的传值

handleLetterClick方法,采用emit 传递给父组件 父组件触发的方法: handleLetterChange方法: 父组件传递给子组件: CityList组件: 兄弟组件的传值可以先将值传递给父组件,然后由父组件传递给兄弟组件 2018-06-12    19:52:08 原文地址:https://www.cnblogs.com/guangzhou11/p/9174795.html

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu

Vue组件间传值 v-model

使用过Vue的同学应该都了解组件之间传值 父组件 --> 子组件 : props 子组件 --> 父组件 : 事件 其实有一种更为简单的方法,是基于上述两种方法,那就是 v-model 我们都在表单中使用过 v-model 来绑定数据,其实组件之间也是可以用 v-model 进行双向绑定的 我们来了解一下 v-model 的原因 <input type="text" v-model="message" /> <!--其实上面这种写法只是

wepy组件间传值

普通组件引用 当页面需要引入组件,或组件需要引入子组件时,必须在.wpy文件的<script>部分先import组件文件,然后在components对象中给组件声明唯一的组件ID:接着在<template>模板部分中,添加以组件ID进行命名的自定义标签,以插入组件. <template> <!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签,从而在`<template>`模板部分中插入组件 --> <ch

vue父子组件的传值总结

久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. 情况一:父组件给子组件传值方法,使用props 父页面:parent.vue 1 <template> 2 <div class="sidebar_contianer"> 3 <sidebar-item :routerData="transmitDa

VUe.js 父组件向子组件中传值及方法

父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以要想在子组件中使用父组件的数据的时候,就需要以属性绑定的形式,将父组件的数据传递到子组件中.     3. 通过属性绑定传递来的数据无法再子组件中直接使用,需要在props中重新定义以后才可以使用.例:props:['变量名'].props是一个数组.    4. 子组件中的data数据都是私有,子

react组件之间传值方式

1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递到子组件中,再然后,子组件通过props接收并调用该函数同时传参) 4.没有任何嵌套关系的组件之间传值(如:兄弟组件之间) 原文地址:https://www.cnblogs.com/yieix/p/12004664.html