0d532ab00cbe4d99fa379fc3b49e3474
Vue 组件间通信

什么是 Vue 组件?

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

Vue组件间通信

父组件向子组件通信

方法一:props

使用props,父组件可以使用props向子组件传递数据。

父组件vue模板father.vue

  • <template>
  • <child :msg="message"></child>
  • </template>
  • <script>
  • import child from './child.vue';
  • export default {
  • components: {
  • child
  • },
  • data () {
  • return {
  • message: 'father message';
  • }
  • }
  • }
  • </script>

子组件vue模板child.vue

  • <template>
  • <div>{{msg}}</div>
  • </template>
  • <script>
  • export default {
  • props: {
  • msg: {
  • type: String,
  • required: true
  • }
  • }
  • }
  • </script>

方法二 使用$children

使用$children可以在父组件中访问子组件。

子组件向父组件通信

方法一:使用vue事件

父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件。

父组件vue模板father.vue

```

top Created with Sketch.