Vue.js 基础入门之组件通信

在 Vue.js 中，组件是构建应用的基本单位，而组件通信则是构建复杂应用的关键。Vue.js 为我们提供了多种通信方式，本文将介绍几种常用的组件通信技术。

props和$emit

// 父组件
<template>
  <child-component :message="msg" @update="handleUpdate"></child-component>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'Hello, Vue.js'
      };
    },
    methods: {
      handleUpdate(newMsg) {
        this.msg = newMsg;
      }
    }
  };
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update</button>
  </div>
</template>
<script>
  export default {
    props: ['message'],
    methods: {
      updateMessage() {
        this.$emit('update', 'Hello, Vue.js 2.0');
      }
    }
  };
</script>

在父组件中使用props向子组件传递数据，并通过@update监听子组件的自定义事件。子组件通过$emit触发自定义事件，从而实现子组件向父组件传递数据。

provide和inject

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
  export default {
    provide: {
      message: 'Hello, Vue.js'
    }
  };
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['message']
  };
</script>

在父组件中使用provide向子组件提供数据，子组件通过inject来注入父组件提供的数据。这种方式可以实现跨级组件的通信。

$parent和$children

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
  export default {
    methods: {
      updateChildMsg() {
        this.$children[0].message = 'Hello, Vue.js';
      }
    }
  };
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: ''
      };
    }
  };
</script>

通过$parent可以访问父组件实例，通过$children可以访问子组件实例。这种方式可以在一定程度上实现父组件和子组件之间的通信。

$refs

// 父组件
<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
  export default {
    methods: {
      updateChildMsg() {
        this.$refs.child.message = 'Hello, Vue.js';
      }
    }
  };
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: ''
      };
    }
  };
</script>

通过$refs可以访问组件的 DOM 元素或子组件实例，从而实现父组件和子组件之间的通信。

总结：

以上是Vue.js中常用的几种组件通信技术，包括props和$emit、provide和inject、$parent和$children、$refs，分别实现了父子组件之间和跨级组件之间的通信。在实际项目中，根据具体的需求选择合适的通信方式，能够帮助我们更好地构建复杂的 Vue.js 应用。