我来为你详细讲解一下“Vue的组件通讯方法总结大全”的完整攻略。

1. 组件通讯方法概述

在Vue的组件化开发中，组件之间的通讯是必不可少的。Vue提供了多种组件通讯方法，包括：

父子组件通讯：父组件通过props向子组件传递数据，子组件通过emit触发事件向父组件传递数据。
兄弟组件通讯：通过一个共同的父组件来实现兄弟组件通讯，即父组件先接收兄弟组件的数据，再把数据传递给另一个兄弟组件。
跨级组件通讯：使用provide/inject或者$attrs/$listeners实现跨级组件通讯。
非父子组件通讯：使用$emit/$on、事件总线、Vuex等方式实现非父子组件的通讯。

下面我们将详细讲解这些通讯方式的实现方式及示例。

2. 父子组件通讯

父组件向子组件传递数据：

父组件中的模板代码：

<template>
  <div>
    <hello-world :msg="message"></hello-world>
  </div>
</template>

<script>
  import HelloWorld from './HelloWorld.vue';

  export default {
    name: 'app',
    components: {
      HelloWorld
    },
    data() {
      return {
        message: 'Hello World'
      }
    }
  }
</script>

子组件中的模板代码：

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    name: 'hello-world',
    props: {
      msg: String
    }
  }
</script>

在上述示例中，我们通过在父组件中使用子组件并传递props的方式向子组件传递了一个名为message、值为'Hello World'的数据。在子组件中，我们通过props接收传递过来的数据并展示在页面上。

子组件向父组件传递数据：

子组件中的模板代码：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
  export default {
    name: 'hello-world',
    methods: {
      handleClick() {
        this.$emit('send-message', 'Child component sends a message to parent component');
      }
    }
  }
</script>

父组件中的模板代码：

<template>
  <div>
    <hello-world :msg="message" @send-message="handleSendMessage"></hello-world>
  </div>
</template>

<script>
  import HelloWorld from './HelloWorld.vue';

  export default {
    name: 'app',
    components: {
      HelloWorld
    },
    data() {
      return {
        message: 'Hello World'
      }
    },
    methods: {
      handleSendMessage(msg) {
        console.log(msg);
      }
    }
  }
</script>

在上述示例中，我们在子组件中通过$emit方法触发了一个名为'send-message'的自定义事件，并向父组件传递了一个字符串类型的msg参数。在父组件中，我们通过在子组件上绑定@send-message事件来监听子组件中触发的事件，同时定义了一个handleSendMessage方法来接收传递过来的msg参数并打印到控制台上。

3. 兄弟组件通讯

由于兄弟组件之间没有直接的通讯方式，因此我们需要通过一个共同的父组件来实现兄弟组件之间的通讯。

父组件中的模板代码：

<template>
  <div>
    <hello-world-1 @send-message="handleSendMessage"></hello-world-1>
    <hello-world-2 :msg="message"></hello-world-2>
  </div>
</template>

<script>
  import HelloWorld1 from './HelloWorld1.vue';
  import HelloWorld2 from './HelloWorld2.vue';

  export default {
    name: 'app',
    components: {
      HelloWorld1,
      HelloWorld2
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      handleSendMessage(msg) {
        this.message = msg;
      }
    }
  }
</script>

兄弟组件1中的模板代码：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
  export default {
    name: 'hello-world-1',
    methods: {
      handleClick() {
        this.$emit('send-message', 'Sibling component 1 sends a message to sibling component 2');
      }
    }
  }
</script>

兄弟组件2中的模板代码：

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    name: 'hello-world-2',
    props: {
      msg: String
    }
  }
</script>

在上述示例中，我们在父组件中声明了两个兄弟组件，并通过handleSendMessage方法实现了兄弟组件之间的数据传递。在兄弟组件1中，我们通过$emit方法触发了一个名为'send-message'的自定义事件，并向父组件传递了一个字符串类型的msg参数。在父组件中，我们通过handleSendMessage方法将传递过来的msg参数赋值给message属性，并作为props传递给了兄弟组件2中。在兄弟组件2中，我们通过props接收传递过来的数据并展示在页面上。

4. 跨级组件通讯

使用provide/inject实现跨级组件通讯：

父组件中的模板代码：

<template>
  <div>
    <hello-world></hello-world>
  </div>
</template>

<script>
  import HelloWorld from './HelloWorld.vue';

  export default {
    name: 'app',
    components: {
      HelloWorld
    },
    provide() {
      return {
        message: 'Hello World'
      }
    }
  }
</script>

子组件中的模板代码：

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    name: 'hello-world',
    inject: ['message'],
    computed: {
      msg() {
        return this.message + ' from Inject';
      }
    }
  }
</script>

在上述示例中，我们在父组件中通过provide方法提供了一个名为message、值为'Hello World'的数据。在子组件中，我们通过inject选项注入了父级提供的message数据，并使用computed计算属性将其拼接后展示在页面上。

使用$attrs/$listeners实现跨级组件通讯：

父组件中的模板代码：

<template>
  <div>
    <hello-world v-bind="$attrs" v-on="$listeners"></hello-world>
  </div>
</template>

<script>
  import HelloWorld from './HelloWorld.vue';

  export default {
    name: 'app',
    components: {
      HelloWorld
    },
  }
</script>

子组件中的模板代码：

<template>
  <div>
    <button v-bind="$attrs" v-on="$listeners">Click me</button>
  </div>
</template>

<script>
  export default {
    name: 'hello-world'
  }
</script>

在上述示例中，我们在父组件中通过$attrs/$listeners将所有的props和自定义事件传递给了子组件，实现了跨级组件的通讯。在子组件中，我们通过v-bind和v-on绑定了父组件传递过来的数据和事件。

5. 非父子组件通讯

使用$emit/$on实现非父子组件通讯：

示例中包含三个组件，分别为A、B、C组件。A组件与B组件为父子组件，B组件与C组件为兄弟组件，A与C组件则为非父子组件。

A组件中的模板代码：

<template>
  <div>
    <my-son></my-son>
  </div>
</template>

<script>
  import MySon from './MySon.vue';

  export default {
    name: 'MyParent',
    components: {
      MySon
    },
    methods: {
      sendMessage(msg) {
        this.$emit('send-message', msg);
      }
    }
  }
</script>

B组件中的模板代码：

<template>
  <div>
    <my-bro></my-bro>
  </div>
</template>

<script>
  import MyBro from './MyBro.vue';

  export default {
    name: 'MySon',
    components: {
      MyBro
    },
    methods: {
      handleSendMessage(msg) {
        this.$emit('send-message', msg);
      }
    }
  }
</script>

C组件中的模板代码：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    name: 'MyBro',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      this.$on('send-message', this.handleReceiveMessage);
    },
    methods: {
      handleReceiveMessage(msg) {
        this.message = msg;
      }
    }
  }
</script>

在上述示例中，我们在A组件中定义了一个sendMessage方法，并通过$emit方法向外发送一个名为'send-message'的自定义事件和一个字符串参数。接着，在B组件中，我们同样通过$emit方法向外发送一个名为'send-message'的自定义事件和一个字符串参数。在C组件中，我们通过mounted钩子函数注册了一个名为'send-message'的自定义事件，并在handleReceiveMessage方法中接收和处理传递过来的数据。

使用事件总线实现非父子组件通讯：

为了实现事件总线，在Vue实例中添加一个空的Vue实例作为事件中心。

// 使用事件总线
const bus = new Vue();

// 在Vue实例中添加事件中心
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  data: {
    bus: bus
  }
})

代码说明：

在Vue实例外创建一个空的Vue实例，作为事件总线。在Vue实例中，将事件中心(bus)作为data传递给组件。在组件中可以通过this.$root.bus的方式来访问事件总线。

在组件中，使用事件总线进行通讯：

// 在组件中使用事件总线
this.$root.bus.$emit('send-message', 'Non-parent/child component communicates via event bus');

在组件中，我们可以通过this.$root.bus来访问事件总线并使用$emit方法向外发送一个名为'send-message'的自定义事件和一个字符串参数。

另外，接收事件也可以使用事件总线：

// 接收事件
this.$root.bus.$on('send-message', msg => {
  console.log(msg);
});

在组件中，我们可以通过this.$root.bus来访问事件总线并使用$on方法监听名为'send-message'的自定义事件。事件触发后，会执行定义的回调函数并接收到传递过来的数据，最后将数据打印到控制台上。

以上就是“Vue的组件通讯方法总结大全”的详细攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue的组件通讯方法总结大全 - Python技术站

vue的组件通讯方法总结大全

1. 组件通讯方法概述

2. 父子组件通讯

3. 兄弟组件通讯

4. 跨级组件通讯

5. 非父子组件通讯

相关文章