精华内容
下载资源
问答
  • VUE父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的...

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。

    场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件。

    比如想实现一个switch开关按钮的公用组件:

    1.父组件可以向按钮组件传递默认值。

    2.子组件的操作可以改变父组件的数据。

    3.父组件修改传递给子组件的值,子组件能动态监听到改变。

    比如父组件点击重置,开关组件的状态恢复为关闭状态:

    方法1:

    1、因为存在子组件要更改父组件传递过来的数据,但是直接操作props里定义的数据vue会报错,所以需要在data里重新定义属性名并将props里的数据接收。

    2、首先想到的肯定是在computed计算属性里监听数据的变化,那就直接在computed里监听父组件传递过来的props数据的变化,如果有变动就进行操作,如:

    export default{

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    data () {return{

    switchStatusData:this.status //重新定义数据

    }

    },

    computed: {

    switchStatus:function() {return this.status //直接监听props里的status状态

    }

    }

    }

    }

    这样就可以在使用switchStatus的地方动态的监听到父组件status的变化。似乎只针对简单的数据类型有效。

    方法2:

    使用watch和computed组合实现:如

    export default{

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    data () {return{

    switchStatusData:this.status

    }

    },

    computed: {

    switchStatus:function() {return this.switchStatusData //监听switchStatusData 的变化

    }

    },

    watch: {

    status (newV, oldV) {//watch监听props里status的变化,然后执行操作

    console.log(newV, oldV)this.switchStatusData =newV

    }

    },

    methods: {

    switchHandleClick () {this.switchStatusData = !this.switchStatusDatathis.$emit('switchHandleClick', this.switchStatusData)

    }

    }

    }

    下面是实现该组件的代码:

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    computed: {

    switchStatus:function() {return this.status

    }

    },//watch: {

    //status (newV, oldV) {

    //console.log(newV, oldV)

    //this.switchStatusData = newV

    //}

    //},

    methods: {

    switchHandleClick () {constswitchStatusData = !this.switchStatusthis.$emit('switchHandleClick', switchStatusData)

    }

    }

    }

    line-height: .8rem;

    padding:0.4rem;

    .switch

    float: right;

    font-size: 0;

    .switch-bar

    position: relative;

    display: inline-block;

    width: .8rem;

    height: .4rem;

    border-radius: .4rem;

    background: #ddd;

    border: 2px solid #ddd;

    vertical-align: middle;

    transition: background .3s, border .3s;&.active

    background: $bgColor;

    border: 2px solid $bgColor;

    .switch-btn

    left: .4rem;

    background: #fff;

    .switch-btn

    position: absolute;

    left: 0px;

    display: inline-block;

    width: .4rem;

    height: .4rem;

    border-radius: .2rem;

    background: #fff;

    transition: background .3s, left .3s;

    展开全文
  • 我想在父组件获取子组件数据对象 ``` v-model="text" @getSearchName="getName"> v-for="(item, index) of dataList" :key="index" :value="item.value" :label="item.label"> ...
  • updated哦,根据你对于问题的更新,按我的理解的话,你是想要在父组件获取子组件的 vm 对吧,比如父组件有一个 options 属性,其值为所有子组件的 option 属性形成的数组或者直接是子组件 vm 本身,对吗?...

    父组件 mounted 阶段,子组件处于什么状态不一定啊,可能都还没渲染呢,你这么做的出发点是什么,简单说说,可能存在其他更好地解决方案?

    updated

    哦,根据你对于问题的更新,按我的理解的话,你是想要在父组件内获取到子组件的 vm 对吧,比如父组件有一个 options 属性,其值为所有子组件的 option 属性形成的数组或者直接是子组件 vm 本身,对吗?

    如果是的话,我可以告诉你 element-ui 是怎么实现的,原理很简单,就是通过 inject 将父组件注入到子组件中,然后通过这个父组件的引用属性来注册子组件,官方源码在这里.

    关于父组件提供依赖的代码在这里, 子组件注入的逻辑在这里。关于 provider/inject 本身,可以去看看官方文档,或者看看我之前写过的文章,高级 Vue 组件模式。

    这种实现方式与你问题中描述的实现方式逻辑上是相反的,之所以这么做比较合理是因为,父组件无法预先知道子组件的渲染状态(就比如你这里遇到了 undefined 的情况),因此父组件关于子组件的描述是需要靠子组件来初始化的,因此将父组件作为依赖项注入子组件,再进行相关的初始化逻辑。

    这种模式在实现存在父子多对一关系的组件时,有广泛的应用,比如 tabs、form 等等。

    展开全文
  • <div slot="title" class="compontent-header"> <span class="title">{{$t('member.MemberProfile.lang_memberprofile_71')}}</span> <i class="iconfont dianadanchuangquxiao close" @...
    <div slot="title" class="compontent-header">
            <span class="title">{{$t('member.MemberProfile.lang_memberprofile_71')}}</span>
            <i class="iconfont dianadanchuangquxiao close" @click="handleClose"></i>
          </div>
    
    
    
    <el-tab-pane :label="$t('member.MemberProfile.lang_memberprofile_170')" name="first">
              <v-profileCreate :profileData="profileData" ref="closeCreateData" @profileEditEvent="profileEditEvent"></v-profileCreate>
            </el-tab-pane>
    
    
    
     handleClose() {
        console.log((this as any).$refs.closeCreateData.memberProfile)
        this.cancel();
      }

     

    展开全文
  • 我们知道在vue中我们会常常用到组件模块化思想,也就是我们常常会把一个部分包装秤一个组件来使用,但有时候我们父组件获取的值,需要传递到子组件中继续使用 问题提出 当前用户已经登录情况下,我在student...

    Vue父组件向子组件传值

    我们知道在vue中我们会常常用到组件模块化的思想,也就是我们常常会把一个部分包装秤一个组件来使用,但有的时候我们父组件获取的值,需要传递到子组件中继续使用

    问题提出

    当前用户已经登录的情况下,我在student的组件中已经获取到了当前用户的信息,但是我student的子组件是没有获取到用户信息的,在子组件中进行学生的一些数据搜索我们要在请求一遍学生信息数据吗?并不是!当然是通过父组件传递给子组件中了

    问题解决

    父组件:

    首先需要在data中定义数据,我这边定义了Info对象用来接收登录对象

    export default {
        data() {
          return {
            Info:{},
            }
        }
    }
    

    Info的复制这里就不写了,其实就是在created中进行了一个数据接口的GET获取到的

    传值时,需要在父组件中引入子组件,我这里使用的是<router-view></router-view>

    我们需要把这个数据定义到子组件html的标签中

    <router-view :Info="Info"></router-view>
    

    我这里就定义了相同名字的Info进行传值

    子组件接收:

    export default {
        props:{
            Info: {
                type:Object,
                required:true
            }
        },
    }
    

    这样子组件中就可以使用从父组件传递过来的对象数据——Info了

    如果传递值是其他的类型,那么type进行相应的修改即可。

    展开全文
  • vue父组件调用子组件的方法-$ref

    千次阅读 2018-05-18 14:30:34
    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) ...属性来获取 ...根据以上三条,我们就可以直接给子组件添加ref属性然后,通过vm.$refs来调用子组件的methods中的方法或者获得data...
  • 父组件通过props形式传值到子组件,子组件获取的数值可以更新,但视图不更新 解决方法: 方法1.在子组件中监听此prop属性,并在nexttick中调用更新方法,子组件中如下图监听prop对象originData,update方法为子组件...
  • 大家都知道父组件子组件传值,子组件父组件传值,两者通信并不难,官网上也有给案例,但是如果子组件想拿到父组件的异步数据,常规的写法是不行的,下面我记录我常用的两者写法; 方法1: 子组件用v-if,当...
  • 问题:当父组件传值给子组件echarts时,发现子组件获取的props为空,刚开始以为是钩子函数放错了地方,后来发现从...解决方案:在父组件定义一个flag,当数据获得的之后再进行子组件的渲染 1.父组件 //父组件 <...
  • 当子组件为form表单时候,父组件需要获取子组件(表单)验证结果。 尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给元素或子...
  • 1.通过$.children的方式,这种方式一般是用在获取所有的子组件的情况下使用 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 子组件定义props,父组件传入数据,子组件在js中获取的时候使用,如果是在html里面,可以直接把变量渲染上去。我就直接从代码上面来进行js代码://子组件中,定义传入变量类型等props: {data: {type: Array,...
  • 问题-父组件传给子组件是个对象,打印对象可以看到对象里数组长度为6, 但直接打印对象里数组发现没有获取到传过来数组数据 解决- 使用watch深度监听此对象 在打印其对象数组即可得到完整数据 ...
  • 使用的组件是自定义组件Table,类似ElementUI中el-table组件的formatter首先我们想到的是$emit调用父组件取返回值,this.$emit(方法名, 传参1, 传参2),但是此方法的返回值是vue对象,而不是父组件方法的return值...
  • 需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象,...
  • 这些方法主要是在这次做项目过程中发现总结,感觉也挺常用,...子组件获取不到值时需要深拷贝我就直接从代码上面来进行js代码://子组件中,定义传入变量类型等props: {data: {type: Array,require: ...
  • vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子组件间的通信,也可以是同级组件间的通信,那么,vue里面...5. 父组件使用子组件的引用ref调用子组件的方法获取子组件的数据 一、子组件通过this.$
  • 有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件。官方指出:1)父组件访问子组件:使用$children或$...2)我们这里通过一个遍历,取出所有子组件的message状态。<div id="app...
  • 如果我在组件的created方法里面,根据id去后台查询详情,可以正常显示,不报错,但是当父组件id值改变后,并不会再次去后台查询了,,假如我后台返回的对象时detail,如果写在computed里面写detail: {get() {let ...
  • 背景 子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,...方法名可以不用带参数,函数中的e代表change事件的对象,直接获取参数即可 <uni-rate value="5" @change="clickStar" :activeColor="star...
  • 先思考网络请求的数据是对象还是数组格式,我这里本来是 变量为zongti的对象格式,但是我读取数据的时候专门把zongti提出来了就变成了数组格式。 所以子组件应为:数组格式 总结:出现这种错误 只要去找上一级数据...
  • 在有些情况下父组件子组件时,我们想要在子组件中打印传递过来数据,这时候如果直接在mounted里面打印会打印出一个空对象 但是在子组件上面模板中是可以渲染出来 这些数据都可以在页面上渲染出来。 如果...
  • 父组件调用子组件方法: 父组件PHTML构成如下,想调用子组件Cc_method方法,首先给子组件定义ref属性: <!-- P.vue --> <template> <...来获取子组件对象,也可以用 this.$...
  • 组件获取数据时,在子组件对象中,使用props选项声明获取的数据,进行绑定属性的拦截,即接收来自父组件的数据。 如下,使用局部组件创建方式,分别创建父组件子组件。 new Vue({ el:"#app", components:{ '...
  • 父组件通过 axios 获取数据,子组件使用 props 接收数据时,子组件执行 mounted 的时候,父组件的axios 还没有返回数据,而且 mounted只执行一次,这时 props 中接收的数据为空,所以在使用的使用自然会报错...
  • 先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部属性,困了我3个小时,真** personal console 以下为原代码 1、home.vue父组件)–personal是被传参数 <!--子组件...
  • 子组件定义props,父组件传入数据,子组件在js中获取的时候使用,如果是在html里面,可以直接把变量渲染上去。 我就直接从代码上面来进行 js代码: //子组件中,定义传入变量类型等 props: { data: {...
  • 父组件利用props向子组件传值,浏览器console有这个值,但是获取不到对象属性,console对象的属性值,打印出来值为undefined。 父组件定义了testobj这个对象。在父组件接口中给这个值重新赋值。 子组件接受这个...
  • 先说问题,父组件利用props向子组件传值,浏览器console有这个值,但是获取不到内部属性,困了我3个小时,真** 父组件定义了personal这个值。在父组件接口中给这个值重新赋值。 子组件接受这个值,浏览器console...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 198
精华内容 79
关键字:

vue父组件获取子组件的对象

vue 订阅