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

川长思鸟来 2022-10-23 08:06 343阅读 0赞

状况1：  
　父组件parent.vue

// asyncData为异步获取的数据，想传递给子组件使用
    <template>
     <div>
      父组件
      <child :child-data="asyncData"></child>
     </div>
    </template>
     
    <script>
     import child from '../demo/children.vue'
     export default {
      data: () => ({
       asyncData: ''
      }),
      components: {
       child
      },
      created () {
      },
      mounted () {
       // setTimeout模拟异步数据
       setTimeout(() => {
        this.asyncData = ' async data'
        console.log('parent 组件结束')
       }, 2000)
      }
     }
    </script>

子组件child.vue

<template>
     <div>
      子组件{
       {childData}}
     </div>
    </template>
     
    <script>
     export default {
      props: ['childData'],
      data: () => ({
      }),
      created () {
       console.log("子组件created-----   "+this.childData) // 空值
      },
      methods: {
      }
     }
    </script>

子组件的html中的\{ \{childData\}\}的值会随着父组件的值而改变  
![在这里插入图片描述][2021030916094155.png]  
但是`created里面的却不会发生改变(生命周期问题)`  
![在这里插入图片描述][20210309160917137.png]

案例二  
　　parent.vue

<template>
     <div>
      父组件
      <child :child-object="asyncObject"></child>
     </div>
    </template>
     
    <script>
    import child from '../demo1/children.vue'
     export default {
      data: () => ({
       asyncObject: ''
      }),
      components: {
       child
      },
      created () {
      },
      mounted () {
       // setTimeout模拟异步数据
       setTimeout(() => {
        this.asyncObject = {'items': [1, 2, 3]}
        console.log('parent 结束')
       }, 2000)
      }
     }
    </script>

子组件 children

<template>
     <div>
      子组件
      <p>{
       {childObject.items[0]}}</p>
     </div>
    </template>
     
    <script>
     export default {
      props: ['childObject'],
      data: () => ({
      }),
      created () {
       console.log(this.childObject) // 空值
      },
      methods: {
      }
     }
    </script>

created里面的却不会发生改变， 子组件的html中的\{ \{ \{childObject.items\[0\]\}\}的值虽然会随着父组件的值而改变，但是过程中会报错。

是因为：首先传过来的是空，然后再异步刷新值，也就是开始时候childObject.items\[0\]等同于’’.item\[0\]这样的操作，  
所以就会报下面的错：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]  
解决办法：  
1、使用v-if可以解决报错问题和created为空问题  
父组件parent

<template>
     <div>
      父组件
      <child :child-object="asyncObject"  v-if="flag"></child>
     </div>
    </template>
     
    <script>
    import child from '../demo1/children.vue'
     export default {
      data: () => ({
       asyncObject: '',
       flag:false
      }),
      components: {
       child
      },
      created () {
      },
      mounted () {
       // setTimeout模拟异步数据
       setTimeout(() => {
        this.asyncObject = {'items': [1, 2, 3]}
        this.flag= true
    	console.log('parent 结束')
       }, 2000)
      }
     }
    </script>

子页面 children

<template>
     <div>
      子组件
      <p>{
       {childObject.items[0]}}</p>
     </div>
    </template>
     
    <script>
     export default {
      props: ['childObject'],
      data: () => ({
      }),
      created () {
    	console.log("子组件create-----"+JSON.stringify(this.childObject)) // 空值
      },
      methods: {
      }
     }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]  
2、子组件使用watch来监听父组件改变的prop，使用methods来代替created

子组件 children

<template>
     <div>
      子组件
      <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只会执行一次，但是又想监听改变的值做其他事情的话，只能搬到这里咯
          console.log(this.test)// 1
         }
        }
     }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]  
3、子组件watch computed data 相结合(麻烦)

子组件children

<template>
     <div>
      子组件
       <p>{
       {test}}</p>
     </div>
    </template>
     
    <script>
     export default {
        props: ['childObject'],
    	data: () => ({
    	 test: ''
    	}),
    	watch: {
    	 'childObject.items': function (n, o) {
    	  this._test = n[0]
    	 }
    	},
     computed: {
        _test: {
         set (value) {
          this.update()
          this.test = value
         },
         get () {
          return this.test
         }
        }
       },
      methods: {
       update () {
    	  console.log(this.childObject) // {items: [1,2,3]}
    	 }
      }
     }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]  
4、使用prop default来解决\{ \{childObject.items\[0\]\}\}

父组件：

<template>
     <div>
      父组件
      <child :child-object="asyncObject"></child>
     </div>
    </template>
     
    <script>
     import child from  '../demo4/children.vue'
     export default {
      data: () => ({
       asyncObject: undefined // 这里使用null反而报0的错
      }),
      components: {
       child
      },
      created () {
      },
      mounted () {
       // setTimeout模拟异步数据
       setTimeout(() => {
        this.asyncObject = {'items': [1, 2, 3]}
        console.log('parent finish')
       }, 2000)
      }
     }
    </script>

子组件：

<template>
     <div>
      子组件
      <p>{
       {childObject.items[0]}}</p>
     </div>
    </template>
     
    <script>
     export default {
      props: {
       childObject: {
        type: Object,
        default () {
         return {
          items: ''
         }
        }
       }
      },
      data: () => ({
      }),
      created () {
       console.log(this.childObject) // {item: ''}
      }
     }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 4]

[2021030916094155.png]: /images/20221023/b34efe61bb7c4be18f9a7d5c2a8a63cd.png
[20210309160917137.png]: /images/20221023/f832702eac35482cb9bcb93a479f5074.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221023/16e131a07a7c48589312537522712d12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/1cb778cd59b7401785bf33ba2b9799da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/9ccf22a0d1094a7eb6fcc2c1d9d85b03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]: /images/20221023/6ff311e405bc413ab805b951f2ecca93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 4]: /images/20221023/51cdb50758724ae48c01f4a770b1d162.png