案例一

父组件parent.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// asyncData为异步获取的数据，想传递给子组件使用
<template>
  <div>
   父组件
   <child :child-data= "asyncData" ></child>
  </div>
</template>
 
<script>
  import child from './child'
  export default {
   data: () => ({
    asyncData: ''
   }),
   components: {
    child
   },
   created () {
   },
   mounted () {
    // setTimeout模拟异步数据
    setTimeout(() => {
     this .asyncData = 'async data'
     console.log( 'parent finish' )
    }, 2000)
   }
  }
</script>

子组件child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div>
   子组件{{childData}}
  </div>
</template>
 
<script>
  export default {
   props: [ 'childData' ],
   data: () => ({
   }),
   created () {
    console.log( this .childData) // 空值
   },
   methods: {
   }
  }
</script>

上面按照这里的解析，子组件的html中的{{childData}}的值会随着父组件的值而改变，但是created里面的却不会发生改变(生命周期问题)

案例二

parent.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
   父组件
   <child :child-object= "asyncObject" ></child>
  </div>
</template>
 
<script>
  import child from './child'
  export default {
   data: () => ({
    asyncObject: ''
   }),
   components: {
    child
   },
   created () {
   },
   mounted () {
    // setTimeout模拟异步数据
    setTimeout(() => {
     this .asyncObject = { 'items' : [1, 2, 3]}
     console.log( 'parent finish' )
    }, 2000)
   }
  }
</script>

child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div>
   子组件<!--这里很常见的一个问题，就是{{childObject}}可以获取且没有报错，但是{{childObject.items[0]}}不行，往往有个疑问为什么前面获取到值，后面获取不到呢？-->
   <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]}}的值虽然会随着父组件的值而改变，但是过程中会报错

?
1
2
// 首先传过来的是空，然后在异步刷新值，也开始时候childObject.items[0]等同于''.item[0]这样的操作，所以就会报下面的错
vue.esm.js?8910:434 [Vue warn]: Error in render function : "TypeError: Cannot read property '0' of undefined"

针对二的解决方法：

使用v-if可以解决报错问题，和created为空问题

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// parent.vue
<template>
  <div>
   父组件
   <child :child-object= "asyncObject" v- if = "flag" ></child>
  </div>
</template>
 
<script>
  import child from './child'
  export default {
   data: () => ({
    asyncObject: '' ,
    flag: false
   }),
   components: {
    child
   },
   created () {
   },
   mounted () {
    // setTimeout模拟异步数据
    setTimeout(() => {
     this .asyncObject = { 'items' : [1, 2, 3]}
     this .flag = true
     console.log( 'parent finish' )
    }, 2000)
   }
  }
</script>

child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
   子组件
   <!--不报错-->
   <p>{{childObject.items[0]}}</p>
  </div>
</template>
 
<script>
  export default {
   props: [ 'childObject' ],
   data: () => ({
   }),
   created () {
    console.log( this .childObject) // Object {items: [1,2,3]}
   },
   methods: {
   }
  }
</script>

子组件使用watch来监听父组件改变的prop，使用methods来代替created

parent.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
   父组件
   <child :child-object= "asyncObject" ></child>
  </div>
</template>
 
<script>
  import child from './child'
  export default {
   data: () => ({
    asyncObject: ''
   }),
   components: {
    child
   },
   created () {
   },
   mounted () {
    // setTimeout模拟异步数据
    setTimeout(() => {
     this .asyncObject = { 'items' : [1, 2, 3]}
     console.log( 'parent finish' )
    }, 2000)
   }
  }
</script>

child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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只会执行一次，但是又想监听改变的值做其他事情的话，只能搬到这里咯
     console.log( this .test) // 1
    }
   }
  }
</script>

子组件watch computed data 相结合，有点麻烦

parent.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
   父组件
   <child :child-object= "asyncObject" ></child>
  </div>
</template>
 
<script>
  import child from './child'
  export default {
   data: () => ({
    asyncObject: undefined
   }),
   components: {
    child
   },
   created () {
   },
   mounted () {
    // setTimeout模拟异步数据
    setTimeout(() => {
     this .asyncObject = { 'items' : [1, 2, 3]}
     console.log( 'parent finish' )
    }, 2000)
   }
  }
</script>

child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div>
   子组件<!--这里很常见的一个问题，就是{{childObject}}可以获取且没有报错，但是{{childObject.items[0]}}不行，往往有个疑问为什么前面获取到值，后面获取不到呢？-->
   <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>

使用emit，on，bus相结合

parent.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
   父组件
   <child></child>
  </div>
</template>
 
<script>
  import child from './child'
  export default {
   data: () => ({
   }),
   components: {
    child
   },
   mounted () {
    // setTimeout模拟异步数据
    setTimeout(() => {
     // 触发子组件，并且传递数据过去
     this .$bus.emit( 'triggerChild' , { 'items' : [1, 2, 3]})
     console.log( 'parent finish' )
    }, 2000)
   }
  }
</script>

child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
   子组件
   <p>{{test}}</p>
  </div>
</template>
 
<script>
  export default {
   props: [ 'childObject' ],
   data: () => ({
    test: ''
   }),
   created () {
    // 绑定
    this .$bus.on( 'triggerChild' , (parmas) => {
     this .test = parmas.items[0] // 1
     this .updata()
    })
   },
   methods: {
    updata () {
     console.log( this .test) // 1
    }
   }
  }
</script>

这里使用了bus这个库，parent.vue和child.vue必须公用一个事件总线（也就是要引入同一个js，这个js定义了一个类似let bus = new Vue()的东西供这两个组件连接），才能相互触发

使用prop default来解决{{childObject.items[0]}}

parent.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
   父组件
   <child :child-object= "asyncObject" ></child>
  </div>
</template>
 
<script>
  import child from './child'
  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>

child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div>
   子组件<!--1-->
   <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>

在说用vuex解决方法的时候，首先看看案例三

案例三

main.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue'
import App from './App'
import router from './router'
import VueBus from 'vue-bus'
import index from './index.js'
Vue.use(VueBus)
 
Vue.config.productionTip = false
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
   index
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app' ,
  store,
  router,
  template: '<App/>' ,
  components: { App }
})

index.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const state = {
  asyncData: ''
}
 
const actions = {
  asyncAction ({ commit }) {
   setTimeout(() => {
    commit( 'asyncMutation' )
   }, 2000)
  }
}
const getters = {
}
 
const mutations = {
  asyncMutation (state) {
   state.asyncData = { 'items' : [1, 2, 3]}
  }
}
 
export default {
  state,
  actions,
  getters,
  mutations
}

parent.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div>
   父组件
   <child></child>
  </div>
</template>
 
<script>
  import child from './child'
  export default {
   data: () => ({
   }),
   components: {
    child
   },
   created () {
    this .$store.dispatch( 'asyncAction' )
   },
   mounted () {
   }
  }
</script>

child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
   子组件
   <p>{{$store.state.index.asyncData.items[0]}}</p>
  </div>
</template>
 
<script>
  export default {
   data: () => ({
   }),
   created () {
   },
   methods: {
   }
  }
</script>

{{$store.state.index.asyncData.items[0]}}可以取到改变的值，但是过程中还是出现这样的报错，原因同上

复制代码 代码如下:

[Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"

所以这里的解决方法是：vuex结合computed、mapState或者合computed、mapGetters

parent.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div>
   父组件
   <child></child>
  </div>
</template>
 
<script>
  import child from './child'
  export default {
   data: () => ({
   }),
   components: {
    child
   },
   created () {
    this .$store.dispatch( 'asyncAction' )
   },
   mounted () {
   }
  }
</script>

child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div>
   子组件
   <p>{{item0}}</p>
   <p>{{item}}</p>
  </div>
</template>
 
<script>
  import { mapState, mapGetters } from 'vuex'
  export default {
   data: () => ({
    test: ''
   }),
   computed: {
    ...mapGetters({
     item: 'getAsyncData'
    }),
    ...mapState({
     item0: state => state.index.asyncData
    })
   },
   created () {
   },
   methods: {
   }
  }
</script>

index.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const state = {
  asyncData: ''
}
 
const actions = {
  asyncAction ({ commit }) {
   setTimeout(() => {
    commit( 'asyncMutation' , { 'items' : [1, 2, 3]}) // 作为参数，去调用mutations中的asyncMutation方法来对state改变
   }, 2000)
  }
}
const getters = {
  getAsyncData: state => state.asyncData
}
 
const mutations = {
  asyncMutation (state, params) {
   state.asyncData = params.items[0] // 此时params={'items': [1, 2, 3]}被传过来赋值给asyncData，来同步更新asyncData的值，这样html就可以拿到asyncData.items[0]这样的值了
  }
}
 
export default {
  state,
  actions,
  getters,
  mutations
}

注意上面的

?
1
2
3
4
....
commit( 'asyncMutation' , { 'items' : [1, 2, 3]})
...
state.asyncData = params.items[0]

如果写成这样的话

?
1
2
commit( 'asyncMutation' )
state.asyncData = { 'items' : [1, 2, 3]}

首先asyncAction是个异步的操作，所以asyncData默认值为空，那么还是导致,child.vue这里报0的错

?
1
2
3
4
5
6
7
<template>
  <div>
   子组件
   <p>{{item0}}</p>
   <p>{{item}}</p>
  </div>
</template>

不过根据以上的案例，得出来一个问题就是异步更新值的问题，就是说开始的时候有个默认值，这个默认值会被异步数据改变，比如说这个异步数据返回的object，如果你用props的方式去传递这个数据，其实第一次传递的空值，第二次传递的是更新后的值，所以就出现{{childObject.items[0]}}类似这种取不到值的问题，既然说第一次是空值，它会这样处理''.items[0],那么我们是不是可以在html判断这个是不是空（或者在computed来判断是否为默认值），所以把案例二的child.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div>
   <p>{{childObject != '' ? childObject.items[0]: '' }}</p>
  </div>
</template>
 
<script>
  export default {
   props: [ 'childObject' ],
   data: () => ({
   }),
   created () {
    console.log( this .childObject) // 空值
   },
   methods: {
   }
  }
</script>

这样是可以通过不报错的，就是created是空值，猜想上面vuex去stroe也可以也可以这样做

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue