精华内容
下载资源
问答
  • 其中父组件页面调用子组件,v-bind绑定要传递的值chargePeriodArr。 A页面设置如下: 而chargePeriodArr是动态的,有一个地方它赋值。 子组件B页面props接收父组件传过来的数据: 子组件接受父组件...

    前言:在vue项目中,子组件是一个弹框,需要在父组件中显示此弹框,其弹框内容来自于父组件。父子组件之间的传值通过props来实现。

             A为父组件页面,B为子组件页面。其中父组件页面调用子组件,v-bind绑定要传递的值chargePeriodArr。

             A页面设置如下:

        而chargePeriodArr是动态的,有一个地方给它赋值。

      子组件B页面props接收父组件传过来的数据

    子组件接受父组件的值分为--引用类型和普通类型两种;

    ①普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null);

    ②引用类型:数组(Array)、对象(Object)。

    其中,引用类型的值,当在子组件中修改后,父组件的也会被修改,那么,其他同样引用了该值的子组件内部的值也会跟着被修改。 

          为避免这种错误,我们可以设置一个从父组件传过来的数据的copy,如chargePeriodArr1,这个就可以保证chargePeriodArr没有被修改,修改的只是chargePeriodArr1。

    参考博客:

          父组件向子组件传递数组   https://blog.csdn.net/guojing5721/article/details/96156600 

     

    展开全文
  • 组件向子组件传递数组格式数据

    千次阅读 2019-07-16 17:49:24
    vue项目中,子组件是一个...其中父组件页面调用子组件,v-bind绑定要传递的值tableLabelTest。 A页面设置如下: tableLabelTest是动态的,有一个地方它赋值 子组件B页面props接收父组件传过来的数据, ...

    vue项目中,子组件是一个弹框,需要做父组件中显示此弹框,其弹框内容来自于父组件。父子组件之间的传值通过props来实现。

    以下以A为父组件页面,B为子组件页面来说明。其中父组件页面调用子组件,v-bind绑定要传递的值tableLabelTest。

    A页面设置如下:

    tableLabelTest是动态的,有一个地方给它赋值

    子组件B页面props接收父组件传过来的数据,

    子组件接受的父组件的值分为——引用类型和普通类型两种,

    普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)

    引用类型:数组(Array)、对象(Object)

    其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,

    但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。由于我从父组件传过来的数组类型的数据,是引用类型,可能会报下图这种错误。

    为避免报这种错误,我们可以设置一个从父组件传过来的数据的copy,如tableLabelTest1,这个就可以保证tableLabelTest没有被修改,修改的只是tableLabelTest1

    展开全文
  • 声明用这些变量去接收父组件的传值 props: ['cmovies', 'cmessage' ], data() { return { } } } const vm = new Vue({ el: '#app' , data: { message: '来看电影啊! 这里是我从父组件拿来的...

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
        <template id='cpn'>
            <div>
                <h4 v-html="cmessage"></h4>
                <ul>
                    <li v-for="item in cmovies">
                        {{item}}
                    </li>
                </ul>
            </div>
        </template>
        <div id='app'>
            //分别绑定用哪个变量去接收哪个变量的值
            <cpn :cmovies='movies' :cmessage='message' ></cpn>
        </div>
        <script>
            //子组件
            const cpn = {
                //外部模板
                template: '#cpn',
                //声明用这些变量去接收父组件的传值
                props: ['cmovies', 'cmessage'],
                data() {
                    return {
    
                    }
                }
            }
            const vm = new Vue({
                el: '#app',
                data: {
                    message: '来看电影啊!<br/>这里是我从父组件拿来的电影数据!',
                    movies: ['哪吒', '千与千寻', '哆啦A梦', '蜘蛛侠']
                },
                //注册子组件
                components: {
                    cpn
                }
            })
        </script>
    </body>
    
    </html>

     

    转载于:https://www.cnblogs.com/carry-2017/p/11287959.html

    展开全文
  • react 父组件传递函数给子组件

    千次阅读 2019-07-15 00:09:33
    学习react过程中向把Lits列表中的Item项抽象成一个组件子组件内部有个SwipeAction组件,它需要接受一个对象,对象中包含一个自定义函数,不是直接通过props传递的函数;这就有点晕了,不知道jsx能否找到函数的所属...

    文章参考

    问题来源

    学习react过程中向把Lits列表中的Item项抽象成一个组件,子组件内部有个SwipeAction组件,它需要接受一个对象,对象中包含一个自定义函数,不是直接通过props传递的函数;这就有点晕了,不知道jsx能否找到函数的所属对象,特此做了相关记录

    案例

    父组件

    // 通过高阶函数返回定义的事件,高阶函数获取变量参数,在返回函数中获取事件对象
    deleteGoodsByIdByPost(goodsId, index){
        let that = this;
        that.state.goodsList.splice(index, 1);
        that.setState({
            goodsList : that.state.goodsList
        })
        GoodsService.deleteGoodsByIdByPost(goodsId)
            .then(function(res){
            if(res.data == "sucess"){
                Toast.success('删除成功 !!!', 1);
            }
        });
    }
    
    render () {
    	    // 顶部右侧按钮,实现页面切换
    	    let typeInBtn = <Link to={ "/goodsManage/goodsDetailsAdd" }>录入</Link>;
    		return (
                <div>
                    <div className={'contentStyle'}>
                        {this.state.goodsList.map((currentObj, index, originArr) => {
                            let rightSwipeConfigArray = [{
                                text: '删除',
                                onPress: this.deleteGoodsByIdByPost.bind(this,currentObj.goodsId, index),
                                style: { backgroundColor: '#F4333C', color: 'white' },
                            }];
                            let url = "/goodsManage/goodsDetailsUpdate/"+currentObj.goodsId;
                            return (
                                <GoodsListItemComp key={index} url={url} goodsObj={currentObj} rightSwipeConfigArray={rightSwipeConfigArray}></GoodsListItemComp>
                            );
                        })}
                    </div>
                </div>
    		);
    	}
    

    子组件GoodsListItemComp

    import BaseComponent from '../core/BaseComponent.js';
    import { SwipeAction, Button, Toast } from 'antd-mobile';
    import { Link } from 'react-router-dom';
    
    /**
     * 商品列表的 Item 项组件
     */
    class GoodsListItemComp extends BaseComponent {
    
        // GoodsDetails的构造函数,可以执行初始化的操作
        constructor (props) {
            super(props);
            let that = this;
            this.imageStyle = {
                width: "90px",
                height: "auto",
                float: "left"
            };
            let  propsRightSwipeConfigArray = null;
            if(props.rightSwipeConfigArray == undefined){
                propsRightSwipeConfigArray = [];
            }else{
                propsRightSwipeConfigArray = props.rightSwipeConfigArray;
            }
            this.state = {
                // 商品对象
                goodsObj: props.goodsObj,
                url: props.url,
                rightSwipeConfigArray : propsRightSwipeConfigArray
            };
        }
    
    	render () {
            let {goodsObj, rightSwipeConfigArray, url} = this.state;
    		return (
                <SwipeAction style={{ backgroundColor: 'gray' }}
                             autoClose
                             right={rightSwipeConfigArray}
                >
                     <Link to={ url }>
                         <div style={{"background": "#fff"}} >
                             <img src='src/assets/yay.jpg' style={this.imageStyle}/>
                             <div style={{"marginLeft": "100px"}}>
                                 <div style={{"fontSize":"16px","lineHeight":"1.8"}}>{goodsObj.goodsName}-{goodsObj.goodsId}</div>
                                 <div style={{"lineHeight":"1.8"}}>售价:{goodsObj.salePrice}</div>
                                 <div style={{"clear": "both"}}></div>
                             </div>
                         </div>
                     </Link>
                </SwipeAction>
    		);
    	}
    }
    export default GoodsListItemComp;
    

    SwipeAction 的属性right 定义的方法,最终还是来自父组件传递过来的,方法中的this是指向的父组件

    展开全文
  • 先贴上报错信息方便他人查找: [Vue warn]: Error in render: “TypeError: Cannot read property ‘0’ of undefined” ...后来在网上查了之后才明白,原来是组件给子组件传递的初始值是异步获取的,也就是...
  • 项目问题介绍:父组件中填入各种查询条件,点击查询按钮查出符合条件的数据。其中,数据列表是引入的...父组件:这是父组件中如何引用的子组件。testParams是我需要传过去的参数对象。参数名是params。 组...
  • vue组件向子组件传递多个数据

    万次阅读 2017-06-27 18:28:01
    在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况:第一种:静态数据传递传递一个 字符串 第二种:动态数据传递:绑定一个字符串...
  • 1、自定义组件–概述 新增组件: 创建文件夹,右键-》新建component 一个组件由4个文件组成(js,json...实际就是哪个页面要使用这个组件,就在哪个页面的json文件中申明 { "usingComponents": { "tabs":"../../co
  • 在Rect中,数据都大体上都是单向数据流动的,由节点传到节点,子组件都是通过Props从父组件那里获取数据,这样的话,如果很多子组件用了数据只需要改变父组件的数据子组件的数据都会发生改变react就会递归重新...
  • 方法一:子组件watch(监听)父组件数据的变化 watch基础类型的变量 data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 数组的watch data(.....
  • vue组件之间传递数组 子组件获取不到 父组件的值如果是异步请求获取的 需要push一下才可以拿到
  • Vue子父组件间的数据传递

    千次阅读 2017-08-01 16:50:19
    Vue组件间的作用域是独立的,不能相互之间调用数据,需要通过特定的方法进行数据的传递。 一、组件往子组件传递数据 二、组件往父组件传递数据 三、Vuex传递数据
  • 此篇文章是在已经创建好自定义组件和当前页面的前提下传递参数,仅仅涉及传递参数的部分
  • 父组件子组件传值 (通过在子组件绑定子组件数组prop中的元素=父组件中data属性) &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=&...
  • 如果父组件中要传给子组件的值是从接口里面获取的,那么子组件刚开始得到的是空值。这个时候不应该传给子组件的。你可以在子组件里面延时加载。或者是按照下面方法来 父组件: &lt;template&gt;  &...
  • 前端新人,在第一次对接口的时候遇到不少小问题,都是特别细节的问题,今天...在确保了子组件父组件数据都正确,语法都正确的情况下,数据在第一次进入页面时还是没办法显示: 但是我们切换“数量”和“面积”按钮时
  • 不能 在子组件的模板内直接引用父组件的数据。需要通过子组件的 props 选项显式声明子组件的数据: 子组件父组件的关系: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;...
  • Vue组件向子组件传递一个动态的值,组件只能获取初始值,不能实时更新的解决方法 解决方法就是用组件的watch()监听组件的数据变化; 原来需要在组件watch(监听)组件数据的变化。 而watch只能传递基础...
  • 需要实时监控后台数据,向子组件传递,更新页面。 百度了一下,说使用watch可以监听。 试了一下,发现并不能改变。debug模式看了一下,数据已经接收到了,因为组件还有孙子组件。这部分没有进行监听,修改了孙子...
  • 在main.js内全局注册newscard 组件 子组件newscard.vue ... 子组件内通过v-for=”item inreceiveUserinfo“接受从父组件接受的数组数据==(注意不能用lists数组直接传值== 子组件内通过props:[“receive.
  • -- 父组件 --> <template> <div> <my-component ref="myComponent" :id="curId" /> </div> </template> <script> export default { data(){ return { ...
  • 父组件传递给子组件 组件代码代码: // 组件import引入组件(组件路径要对) import addressToast from '@/components/addressToast' // 在component中加载组件 components: { addressToast }, ...
  • (一)组件向子组件传递数据 1 要在组件中引用组件,要先在组件的json文件中说明,(简单说就是在组件的json文件里加在图中画红圈的代码)如图: 2 引入成功后,我现在组件的js文件中data里定义了一个...
  • 定义组件,在使用组件时,向子组件传递数组类型的参数,组件接收到数组之后对数据进行渲染。 而组件的数值是不断变化的,点击按钮一次,获取一次值。 当数组不为空时,正常渲染,但是数组为空时,会保留上一...
  • <template name=... <view class='wrapper-2'> <!--创建父组件实例所引入的子组件的实例--> <com-ico ico-two="ico2" ico-left-2="icoLeftTwo" content="¥ 10"></com-ico> ...
  • ①定义组件,父组件传递 number这个数值给子组件,如果传递的参数很多,推荐使用json数组{ }的形式 ②定义组件,组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会...
  • 两步走: ...2.父组件在template元素中引用子组件时 绑定属性 属性和 子组件中的 props:[] 数组中的属性对应起来 父组件写法: <template> <element> <br> <v-head...
  • 子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法 props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatter: ...
  • layui 父页面传递数据iframe子页面

    千次阅读 2020-01-20 15:26:31
    //获取当前打开的子页面id var frameId = $(layero).find('iframe').attr("id"); //找到子页面的document对象 var document = window.frames[frameId].document; //根据id找到子页面中相应的元素并赋值 $...
  • vue父页面给子页面传递数据

    千次阅读 2019-10-07 16:36:20
    父页面: <template> <div>{{msg}} <Son title='向文件传递数据' :data='data' :lifemsg ='lifemsg' :num='num'/> <button @click="chageMsg">修改数据</button> <input ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,154
精华内容 23,261
关键字:

数组给子页面父组件传递