用一些简单的实例总结Vue组件间通信

最新推荐文章于 2022-07-08 00:14:00 发布

xicc1112

最新推荐文章于 2022-07-08 00:14:00 发布

阅读量733

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/xicc1112/article/details/106211934

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

props

父组件

<template>
  <div id="app">
    <my-comone :parentmsg="msg"></my-comone>
  </div>
</template>
<script>
import Comone from './components/Comone.vue'
export default {
  name: 'App',
  data() {
    return {
      msg: '父组件的值'
    }
  },
  components: {
    'my-comone': Comone
  }
}
</script>

父组件在引用子组件的时候，通过属性绑定（v-bind:）的形式，把需要传递的数据传递到子组件内部。
子组件

<template>
  <div>我是子组件，我通过props获取---{{ parentmsg }}</div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: ['parentmsg']
}
</script>

把父组件传递过来的parentmsg属性，现在props中定义一下，便可使用这个数据。实现了父组件向子组件传值。

详细关于props的知识，请看：https://cn.vuejs.org/v2/api/?#props

events（$emit）

父组件

<template>
  <div id="app">
    <my-comtwo @parentmsg="show"></my-comtwo>
  </div>
</template>
<script>
import Comtwo from './components/Comtwo.vue'
export default {
  name: 'App',
  data() {
    return {
      msgFromSon: null
    }
  },
  methods: {
    show(data) {
      this.msgFromSon = data
    }
  },
  components: {
    'my-comtwo': Comtwo
  }
}
</script>

子组件

<template>
  <div>
    <p>子组件按钮：</p>
    <input type="button" value="点我向父组件传值" @click="myclick" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      sonmsg: { name: 'kk', age: 20 }
    }
  },
  methods:{
      myclick(){
          this.$emit('parentmsg',this.sonmsg)
      }
  }
}
</script>

当点击子组件按钮时，通过$emit调用一个事件，子组件的data作为参数传递到父组件，父组件通过v-on监听并接受参数。实现子组件向父组件传值。

$children / $parent

父组件

<template>
  <div id="app">
    <div>{{ msg }}</div>
    <my-comtwo></my-comtwo>
    <button @click="change">点击改变子组件值</button>
  </div>
</template>
<script>
import Comtwo from './components/Comtwo.vue'
export default {
  name: 'App',
  data() {
    return {
      msg: '我是父组件的值'
    }
  },
  methods: {
    change() {
      this.$children[0].message = '我是新的子组件的值'
    }
  },
  components: {
    'my-comtwo': Comtwo
  }
}
</script>

子组件

<template>
  <div>
    <span>{{ message }}</span>
    <p>获取父组件的值为：{{ parentVal }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '我是子组件的值'
    }
  },
  computed: {
    parentVal() {
      return this.$parent.msg
    }
  }
}
</script>

provide / inject

父组件

<template>
  <div id="app"><my-comtwo></my-comtwo></div>
</template>
<script>
import Comtwo from './components/Comtwo.vue'
export default {
  name: 'App',
  data() {
    return {}
  },
  provide: {
    msg: '我是父组件中的值'
  },
  components: {
    'my-comtwo': Comtwo
  }
}
</script>

子组件

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: this.msg
    }
  },
  inject: ['msg']
}
</script>

简单来说就是父组件通过provide向所有子组件提供变量msg，子组件通过inject注入变量msg。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

ref

父组件

<template>
  <div id="app">
    <my-comtwo ref="test"></my-comtwo>
    <button @click="btn1">ref获取子组件的值</button>
  </div>
</template>
<script>
import Comtwo from './components/Comtwo.vue'
export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    btn1() {
      console.log(this.$refs.test.message)
    }
  },
  components: {
    'my-comtwo': Comtwo
  }
}
</script>

子组件

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      message: '我是子组件的值'
    }
  }
}
</script>

可通过ref除了可以获取DOM元素以外，还可以进行父子组件间通信。

eventBus

//event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

父组件

<template>
  <div>
    <my-comone></my-comone>
    <my-comtwo></my-comtwo>
  </div>
</template>
<script>
import Comone from './components/Comone.vue'
import Comtwo from './components/Comtwo.vue'
export default {
  components: {
    'my-comone': Comone,
    'my-comtwo': Comtwo
  }
}
</script>

子组件一

<template>
  <div>
    <button @click="btnHandle">num+1</button>
    <span>num={{ num }}</span>
  </div>
</template>
<script>
import { EventBus } from '../store/event-bus.js'
export default {
  data() {
    return {
      num: 0
    }
  },
  methods: {
    btnHandle() {
      EventBus.$emit('addition', {
        num: this.num++
      })
    }
  }
}
</script>

子组件二

<template>
  <div>
    <span>sum：{{ count }}</span>
  </div>
</template>
<script>
import { EventBus } from '../store/event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num
    })
  }
}
</script>