精华内容
下载资源
问答
  • 下面小编就为大家带来一篇vue父组件获取子组件中的数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 我想在父组件获取子组件数据对象 ``` v-model="text" @getSearchName="getName"> v-for="(item, index) of dataList" :key="index" :value="item.value" :label="item.label"> ...
  • 先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue父组件)–personal是被传的参数 <!--子组件...
  • vue3 父组件获取子组件属性

    千次阅读 2021-05-17 15:55:49
    组件按照普通组件来写,把要让父组件获取的数据return 出去 在组件中一定要把获取的组件 return出去,否则是拿不到的 <template> <Son ref='sonRef'/> </template> <script lang="ts"&...

    子组件按照普通组件来写,把要让父组件获取的数据return 出去

    在父组件中一定要把获取的子组件 return出去,否则是拿不到的

    <template>
     <Son ref='sonRef'/>
    </template>
    <script lang="ts">
    import {
      defineComponent,  
      ref,
    } from 'vue';
    export default defineComponent({
      name: 'Login',
      components: { Son },
      setup(props) {
    	const sonRef= ref(null);
    	const getSon = () => {
    		console.log(sonRef.value.xxx);
    	}
    	// 注意!一定要把子组件sonRef  return 出去
    	return {
    	sonRef,
    	}
    	}
      })
    </script>
    

    当出现这个警告时,表示这个对象可能为空,则可以使用 !.
    如上面的 sonRef.value.xxx 改为 sonRef.value!.xxx
    在这里插入图片描述
    若出现这个报错信息 ,则把数据断言成any
    (sonRef.value as any)!.xxx 或者 (sonRef.value as any).xxx 兴许也行。
    在这里插入图片描述

    展开全文
  • 思路1:就是让利用v-if的重新渲染机制1....// 这是组件上写法 :// 下边写在父组件的methods里refesh:function(){this.someShow=false;var _this=this;this.$nextTick(function(){_this.someShow = true...

    思路1:就是让利用v-if的重新渲染机制

    1.首先考虑的就是手动刷了,给组件加个v-if=”someShow“;

    2.在父组件添加如下方法;

    // 这是组件上写法 :

    // 下边写在父组件的methods里

    refesh:function(){

    this.someShow=false;

    var _this=this;

    this.$nextTick(function(){

    _this.someShow = true;

    })

    }

    // $nextTick

    // $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM 这样重新渲染就会是最新数据了

    这样就完美解决了不更新的问题。、

    思路2:利用watch监听

    在子组件中监听你要的数据,当然别监听对象,监听了不一定好使。亲测不好使,测过好使的,可以给我留言。

    data:function(){

    return {

    title:"",

    content:"",

    btn:""

    }

    },

    methods:{

    changeTitle:function(){

    this.title=this.listTitle;

    // 这里的每次变化了就复制给组件上的变量,视图也就更改了

    },

    changeList:function(){

    this.content=this.listList;

    },

    changeBtn:function(){

    this.btn=this.listBtn;

    }

    },

    watch:{

    listTitle:"changeTitle",

    listList:"changeList",

    listBtn:"changeBtn"

    // 冒号前边这个就是从父组件传过来的,后边的就是变化了的监听函数

    }

    展开全文
  • vue构建页面的顺序为,组件构建 → 组件构建 → 父组件获取异步数据 → 子组件获取父组件异步数据 → 组件更新,也就是说构建的时候生命周期只会执行一次。组件:组件:获取数据import child from './...

    在vue构建页面的顺序为,父组件构建 → 子组件构建 → 父组件获取异步数据 → 子组件获取父组件异步数据 → 子组件更新,也就是说构建的时候生命周期只会执行一次。

    父组件:

    父组件:

    获取数据

    import child from './components/child.vue';

    export default {

    name: 'app',

    props: [],

    data() {

    return {

    asyncObject: null,

    };

    },

    components: {

    child,

    },

    methods: {

    getData() {

    setTimeout(() => {

    this.asyncObject = { items: [4, 5, 6] };

    console.log('getData finish');

    }, 2000);

    },

    },

    };

    子组件:

    {{childObject}}

    export default {

    props: {

    childObject: {

    types: Object,

    defalt: {},

    },

    },

    data() {

    return {};

    },

    methods: {

    updata(val) {

    console.log(val);

    },

    },

    created() {

    this.updata(this.childObject);

    },

    };

    刷新页面后,发现子组件打印的是null,生命周期执行完一次之后就不会再执行了,其实这是再正常不过的了,如果每次都想走生命周期,那就只能把组件销毁再生成,例如用v-if这种方法。

    如果不想每次都销毁组件,那就需要改动一下子组件,使用watch去动态的监听,也能达到效果:

    {{childObject}}

    export default {

    props: {

    childObject: {

    types: Object,

    defalt: {},

    },

    },

    data() {

    return {};

    },

    watch: {

    childObject(n,o) {

    this.updata(o);

    this.updata(n);

    },

    },

    methods: {

    updata(val) {

    console.log(val);

    },

    },

    created() {

    this.updata(this.childObject);

    },

    };

    感觉说的有一点乱,可能是表达的不太清楚吧……

    展开全文
  • 但是在我的实例中,使用该方法传值,最终子组件获取到的数据为空值。 为了找到 Bug,我回顾了一遍通过 Prop 向组件传递数据的过程: 02 通过 Prop 向组件传递数据 笔者使用该方法实现组件向组件传值的过程...

    01 Bug 描述

    笔者基于简化版的 vue-element-admin 前端框架 vue-admin-template 进行二次开发。

    开发中遇到需要父组件向子组件传值的情景,笔者使用 Vue 官方文档提供的 通过 Prop 向子组件传递数据 的方法实现父组件向子组件的传值。但是在我的实例中,使用该方法传值,最终子组件获取到的数据为空值。

    为了找到 Bug,我回顾了一遍通过 Prop 向子组件传递数据的过程。

    02 通过 Prop 向子组件传递数据

    笔者使用该方法实现父组件向子组件传值的过程如下:

    父组件中操作:

    1. 在模板定义中父组件将自己要传递的数据,传递给子组件
    2. 子组件通过绑定属性来绑定父组件所传递的数据

    子组件中操作:

    1. 子组件中将上面用于绑定数据的标签属性经过驼峰转换之后,定义到对应子组件模型属性定义的 props 中
    2. 子组件的标签属性可以使用插值表达式,显示在template模板里面

    我的实例中父组件主要代码如下:

    父组件在创建时调用 fetchData() 从后台获取一个集合数据并保存在 list 数据属性中,然后在模板定义中将 list 数据传递给子组件 ChildComponent

    <template>
      <div class="app-container">    
      	   <!-- 父组件将 list 数据传递给子组件 -->
      	   <!-- 子组件通过绑定属性 child-list 绑定父组件数据 list -->
           <child-component :child-list="list"/>
      </div>
    </template>
    
    <script>
    // 引入子组件 ChildComponent
    import ChildComponent from './components/ChildComponent'
    import { transactionList } from '@/api/remote-search'
    
    export default {
      name: 'FatherComponent',
      components: {
        ChildComponent
      },
      data() {
        return{
          tableKey: 0,
          list: null,
          total: 0,
          listQuery: {
            page: 1,
            limit: 10,
            sort: '+id'
          }
        } 
      },
      created() {
      	// 创建时获取数据
        this.fetchData()
      },
      methods: {
        fetchData() {
          // 通过 api 方法 transactionList() 使用封装的 axios 请求从后台获取数据 
          transactionList(this.listQuery).then(response => {
              this.list = response.data.records
              this.total = response.data.total
              setTimeout(() => {
                this.listLoading = false
              }, 1.5 * 1000)
          })
        }
      }
    }
    </script>
    

    我的实例中子组件主要代码如下:

    子组件中将上面用于绑定数据的child-list经过驼峰转换之后childList,定义到对应子组件模型属性定义 props:["childList"],然后使用该数据计算集合元素总数num,最大值max,最小值min和平均值avg,并将这些计算结果使用插值表达式,显示在template模板中

    <template>
    <el-row>
      <el-row :gutter="40" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
          <div class="card-panel-text">
          <!-- 使用插值表达式显示数据处理结果 -->
          总数:{{num}}
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
          <div class="card-panel-text">
          最大值:{{max}}
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
          <div class="card-panel-text">
          最小值:{{min}}
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
          <div class="card-panel-text">
          平均值:{{avg}}
          </div>
        </el-col>
      </el-row>
    </el-row>
    </template>
    
    <script>
    
    export default {
      // 使用 prop 获取父组件传递过来的数据
      props:["childList"],
      data(){
        return{
          list: this.childList,
          num: 0,
          max: 0,
          min: 100,
          avg: 0,
        }
      },
      created(){
      	// 创建组件时调用该方法处理数据
        this.analysis()
      },
      methods: {
        analysis() {
          this.num = this.list.length
          let sum = 0
          for(let elem of this.list){
            if(elem.score > this.max){
              this.max = elem.score
            }
            if(elem.score < this.min){
              this.min = elem.score;
            }
            sum += elem.score;
          }
          this.avg = parseInt(sum/this.num)
        }
      }
    }
    </script>
    

    03 发现 Bug

    笔者的项目中是使用 axios 来请求后端数据的,这是父组件通过 prop 传值给子组件,子组件获取的值为空的Bug所在。

    3.1 Axios 的异步请求机制

    Axios 是一个异步请求技术 axios 中文网,往往基于 XMLHttpRequest 对象发起的请求都是异步请求。

    异步请求的特点就是请求之后页面不动,响应回来的更新只是页面的局部,多个请求之间互不影响,并行执行。

    3.2 Vue 的生命周期

    Vue 实例的生命周期大概分为以下的几个阶段:

    • create实例创建阶段:钩子函数为 beforeCreate、created
    • compile模板编译阶段:该阶段无生命周期钩子函数
    • mount视图挂载阶段:钩子函数为 beforeMount、mounted
    • update更新阶段:钩子函数为 beforeUpdate、updated
    • destroy实例销毁阶段:钩子函数为 beforeDestroy、destroy

    3.3 异步请求带来的问题

    我们看根据 Vue 的生命周期来看父组件的实例化过程,第一步就是创建阶段,而在创建阶段中就已经调用了 fetchData() 向后端请求数据。

    所以代码层面,我们是在子组件完成编译之前就已经请求了数据,理论上子组件获取到的 list 不该为空。

    这就是 axios 异步请求提高了请求效率之外,带来了一些问题:异步请求之后页面不动,响应回来的更新只是页面的局部,多个请求之间互不影响,并行执行。

    父组件通过 props 向子组件传递异步数据时,再父实例完成模板编译之后,异步数据数据还未到达,这时子组件获取到的数据就为空

    04 解决 Bug

    我们已经发现子组件通过 prop 获取数据为空的问题是 axios 异步请求机制导致的,解决思路有两种:

    • 数据到达后再传递:即等父组件确认从后端获取到数据之后再通过 prop 传递给子组件
    • 监听父组件改变的 prop:在子组件中定义 watch 属性监听父组件通过 prop 传递数据的变化情况

    4.1 数据到达后再传递

    这种解决方式比较符合笔者项目的场景,也有两种方式:一种是使用 v-if 条件渲染;另一种是将异步请求使用 Promise 转化为同步请求获取后端数据。

    这里仅介绍更为简单易用的 v-if 条件渲染方式:在子组件标签中增加 v-if="list != null" 判断要传递的数据是否为空,不为空时才渲染。

    v-if 条件渲染会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 是惰性渲染:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。

    笔者的项目中只需要实例创建时传递一次数据,所以 v-if 的惰性十分契合项目需求。修改父组件代码如下,在代码第4行添加v-if即可:

    <template>
      <div class="app-container">    
      	   <!-- 父组件中增加 `v-if="list != null"` 判断要传递的数据是否为空,不为空时才渲染 -->
           <child-component v-if="list!=null" :child-list="list"/>
      </div>
    </template>
    
    <script>
    // 引入子组件 ChildComponent
    import ChildComponent from './components/ChildComponent'
    import { transactionList } from '@/api/remote-search'
    
    export default {
      name: 'FatherComponent',
      components: {
        ChildComponent
      },
      data() {
        return{
          tableKey: 0,
          list: null,
          total: 0,
          listQuery: {
            page: 1,
            limit: 10,
            sort: '+id'
          }
        } 
      },
      created() {
      	// 创建时获取数据
        this.fetchData()
      },
      methods: {
        fetchData() {
          // 通过 api 方法 transactionList() 使用封装的 axios 请求从后台获取数据 
          transactionList(this.listQuery).then(response => {
              this.list = response.data.records
              this.total = response.data.total
              setTimeout(() => {
                this.listLoading = false
              }, 1.5 * 1000)
          })
        }
      }
    }
    </script>
    

    4.2 监听父组件改变的 prop

    除了上述较为简单的方法,如果你的项目中父组件向子组件传递的数据会频繁动态改变,使用监听的方式可能更加适合你需要的应用场景。

    在子组件中使用 watch 来监听父组件改变的prop,使用methods 来代替 created,本项目的代码不适用这种情况,使用如下子组件实例代码:

    <template>
     <div>
      子组件<!--1-->
      <p>{{test}}</p>
     </div>
    </template>
     
    <script>
     export default {
      props: ['childObject'],
      data: () => ({
       test: ''
      }),
      watch: {
       'childObject.items': function (n, o) {
        this.test = n[0]
        this.updata()
       }
      },
      methods: {
       updata () { // created只会执行一次,但是又想监听改变的值做其他事情,就要使用methods 来代替 created
        console.log(this.test)
       }
      }
     }
    </script>
    

    05 解决后记 - 父组件和子组件互相传值

    Bug 解决过程主要是父组件通过 prop 传值给子组件的过程,这里也记录一下子组件向父组件传值的方法,主要使用 $emit() 方法让父组件监听到自定义事件实现传值。

    一个子组件和父组件互相传值简单例子如下:

    子组件代码

    <template>
        <div>
            <h1>接收到了来自父组件的数据:{{toChildData}}</h1>
            <button @click="toParent">向父组件传值</button>
        </div>
    </template>
     
     
    <script>
    export default {
    	// 接收来自父组件的数据
    	props:['toChildData'],
        data() {
            return {
                childData: '子组件的数据'
            }
        },
        methods: {
            toParent:function() {
            	// 触发当前实例上的事件,向父组件发送数据
            	// 注意事件名为 listenEvent,父组件根据此名来监听事件
                this.$emit('listenEvent', this.data)
            }
        }
    }
    </script>
    

    父组件代码

    
    <template>
        <div>
            <h1>接收到了来自子组件的数据:{{fromChildData}}</h1>
            // @listenEvent="receiveData" 监听子组件的 listenEvent,并调用 receiveData() 接收来子组件的数据
            <child :to-child-data="fatherData" @listenEvent="receiveData"></child>
        </div>
    </template>
     
     
    <script>
    import childComponent from './components/childComponent'
    export default {
    	components: {childComponent},
        data() {
            return {
                fatherData: '这是父组件的数据',
                fromChildData: null
            }
        },
        methods: {
            receiveData(data) {
                this.fromChildData = data.childData;
            }
        }
        
    }
    </script>
    

    参考资料

    通过 Prop 向子组件传递数据

    详解vue父组件传递props异步数据到子组件的问题

    vue条件语句v-if、v-else、v-else-if用法

    展开全文
  • 下面的案例中,父组件引用了一个以element-ui中的NavMenu封装的子组件。 <!-- 父组件 --> <div> <childMenu ref="childMenu"></childMenu> </div> <!-- 子组件 --> <...
  • vue 父组件如何实时监听子组件data数据变化 然后进行业务逻辑处理。父组件代码:#debugger.debugger-1//- 请求.debugger_body_request.debugger_body_request_hostinput(autocomplete = "off", placeholder = ...
  • 子组件为form表单的时候,父组件需要获取子组件(表单)的验证结果。 尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给元素或...
  • 文章目录1.组件的嵌套1.1 组件嵌套的基本使用1.2 组件间的数据关系2. props属性2.1 props的基本使用2.2 数据传递的分类2.2.1 传递数据注意事项2.2.2 传递基本类型数据2.2.2 传递...Vue 组件Vue 实例是一样的,因此在
  • vue笔记,分享自己在学习和工作中点滴~~,记得点击上方蓝字 关注我们!01、问题大家都知道,vue是基于组件化的,...今天我们来聊聊父组件调用子组件属性或方法。这也是我们最常用的功能之一。使用方式就是用到$refs...
  • 多处使用到,故而将此抽离存放在一个单独的vue组件中,需要使用该编辑器的界面,可以使用import来引入该vue组件,做为自 组件。 但在实际使用过程当中,却发现取值或者是赋值遇到了困难,故记录下此解决方法,方便...
  • vue父组件清空子组件填写的值

    千次阅读 2020-11-17 14:40:03
    <component ref="XXX" v-show="isShow" @hidden="hidden"></component> 子组件添加ref的属性,然后通过 this.$refs.属性名,获取子组件的DOM的所有元素 this.$refs.XXX
  • vue父组件的数据如何传送到子组件中?组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。也就是props是子组件访问父组件数据的唯一...
  • 引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例: 窗体代码: <template> <div> <!--弹出框Morse--...
  • 前几天遇到一个问题,在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就...
  • -- 父组件 --> <div class="box" style="margin:20px"> <child ref="childData"></child> <button @click="handelAZiZuJian">点击</button> </div> </template> &...
  • 问题:当组件传值给组件echarts时,发现子组件获取的props为空,刚开始以为是钩子函数放错了地方,后来发现从mounted和created都不行。当在组件data定义传递的数据的时候组件显示正常 原因:后来经过排查,...
  • 我是子组件 {{tile}} <div> <script> data(){ return{ tile:"" } }, props:["newtil"], //这里需要注意props["要与父组件中绑定的< :newtil >一致"] mounted(){ th
  • vue -- 父组件通过$refs获取子组件的值和方法

    万次阅读 多人点赞 2018-11-15 17:29:31
    前言 在vue项目中组件之间的通讯是很...:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的...
  • 父组件<A :test="test"> 传给子组件B B组件接收方式 1>props:['test','title']接收任意类型 2>props:{test:String} 3>props:{test:{type:String,default:'test'}}
  • 父组件是如何给子组件传值呢?我总结了一下大体的方法,如下: 父组件调用子组件的时候 绑定动态属性 &amp;amp;lt;v-header :title=&amp;quot;title&amp;quot;&amp;amp;gt;&amp;amp;lt;/v...
  • 近期做项目时需要父组件在created()钩子函数中异步获取数据然后传给子组件子组件在created()钩子函数中获取传过来的props,并进行初始化,发现子组件在created()钩子函数中获取不到props。 问题原因 首先解释一下...
  • #最近新学习vue的开发,开发中遇到一个这样的问题,我这里简单写一个demo为大家说明下,希望能帮助到有一些同学 这里是我重新写的demo,能最直观的看到现象 <!DOCTYPE html> <html lang="en"> <head&...
  • vue子组件获取父组件方法

    千次阅读 2017-12-16 22:04:13
    注:以下代码未使用esLint语法检查 父组件: <cp_action @parentMethod="macSelect"></cp_action> import ../components/action //引入子组件 expo
  • 父组件: 提交v-bind:index="index"v-for="(item,index) in lists"@delete="handelItemDelete ">{{item}}import ToDoItem from './components/TodoItem'export default {name: 'App',data (){return {todoValue: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,313
精华内容 24,125
关键字:

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

vue 订阅