vue父组件特定时期将数据传给子组件,不是一加载就给

vue父组件从服务器请求到数据后,再将数据给子组件。并不是一上来就有数据,并给子组件,而是父组件拿到数据后传给子组件,然后子组件再处理这些数据!

最简单的两种方式:

方式一:

这种方式就很普通,也没啥技巧,就给子组件加一个ref,然后通过$ref调用就完事了。原理呢也就是那个原理!

子组件:

父组件:



方式二:

这种方式就有个很巧妙的地方

子组件:

父组件:



方式二最巧妙的地方就在于 updateModel 这个属性!!!

一上来,我通过该属性值来决定我是否解析渲染子组件,因为该属性初始值为false,所以并不渲染子组件。当我从服务器请求到数据后,把该属性值改为true!

vue中当某个属性值改变后,就会重写解析模板,完成DOM更新!这个时候v-if为真,就会进行子组件渲染,而我要传递给子组件的数据也已经有了,因此created这个生命周期钩子执行时就会处理我从父组件传来的数据。

为了便于理解,有的术语并不准确,但意思就是这个么意思!

你可能感兴趣的:(vue+element,vue.js,前端)