Vue 父子组件传递方式

Posted 萧晗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 父子组件传递方式相关的知识,希望对你有一定的参考价值。

问题:

parent.vue
<template>
 <div>
  父组件
  <child :childObject="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

<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>
通常用v-if 解决 报错问题,以及create 的时候,childObject 值为空的问题

方式一 用 v-if 解决

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
<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>

方式二 用emit,on,bus组合使用

parent.vue

<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
<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()的东西供这两个组件连接),才能相互触发 (ps:代码如下,需要安装依赖)
import VueBus from ‘vue-bus‘
Vue.use(VueBus)





以上是关于Vue 父子组件传递方式的主要内容,如果未能解决你的问题,请参考以下文章

Vue父子组件及非父子组件如何通信

vue.js学习笔记— 父子组件之间通信的第一种方式 props 和 $emit

Vue父子组件传值

vue之父子组件之间的通信方式

vue父子组件数据传输以及实现父子组件数据双向绑定

vue父子传参