vue2.0组件间如何传值

发布时间：2022-07-06 10:04:39 作者：iii
来源：亿速云阅读：206

Vue2.0组件间如何传值

在Vue.js 2.0中，组件是构建用户界面的基本单位。组件化开发使得代码更加模块化、可维护性更高。然而，随着组件数量的增加，组件之间的数据传递变得尤为重要。Vue.js 提供了多种方式来实现组件间的数据传递，本文将详细介绍这些方法，并通过示例代码帮助读者更好地理解。

1. 父子组件传值

1.1 父组件向子组件传值（Props）

在Vue.js中，父组件可以通过props向子组件传递数据。props是子组件中定义的一个属性，用于接收父组件传递过来的数据。

1.1.1 基本用法

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

在上面的例子中，父组件通过props将parentMessage传递给子组件，子组件通过props接收并在模板中显示。

1.1.2 Props 的类型验证

Vue.js 允许对props进行类型验证，以确保传递的数据符合预期。

<!-- 子组件 -->
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  }
};
</script>

在这个例子中，message是一个必需的字符串类型的prop，而count是一个可选的数字类型的prop，默认值为0。

1.2 子组件向父组件传值（自定义事件）

子组件可以通过自定义事件向父组件传递数据。Vue.js 提供了$emit方法来触发自定义事件。

1.2.1 基本用法

<!-- 父组件 -->
<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
    <p>{{ childMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('child-event', 'Hello from Child!');
    }
  }
};
</script>

在这个例子中，子组件通过$emit触发了一个名为child-event的自定义事件，并将消息传递给父组件。父组件通过监听child-event事件来接收数据并更新childMessage。

1.2.2 使用`.sync`修饰符

Vue.js 提供了.sync修饰符，用于简化父子组件之间的双向绑定。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message.sync="parentMessage"></child-component>
    <p>{{ parentMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <input v-model="internalMessage" @input="updateMessage">
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      internalMessage: this.message
    };
  },
  methods: {
    updateMessage() {
      this.$emit('update:message', this.internalMessage);
    }
  }
};
</script>

在这个例子中，父组件通过.sync修饰符将parentMessage传递给子组件。子组件通过v-model绑定输入框的值，并通过$emit触发update:message事件来更新父组件的parentMessage。

2. 兄弟组件传值

在Vue.js中，兄弟组件之间不能直接传递数据。通常，我们需要通过共同的父组件来实现兄弟组件之间的数据传递。

2.1 通过父组件中转

<!-- 父组件 -->
<template>
  <div>
    <child-a @send-message="handleMessage"></child-a>
    <child-b :message="message"></child-b>
  </div>
</template>

<script>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';

export default {
  components: {
    ChildA,
    ChildB
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleMessage(message) {
      this.message = message;
    }
  }
};
</script>

<!-- 子组件A -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Child B</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello from Child A!');
    }
  }
};
</script>

<!-- 子组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

在这个例子中，子组件A通过$emit触发send-message事件，将消息传递给父组件。父组件通过监听send-message事件来更新message，并将message传递给子组件B。

2.2 使用事件总线（Event Bus）

事件总线是一种全局事件机制，允许组件之间直接通信，而不需要通过共同的父组件。

2.2.1 创建事件总线

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

2.2.2 使用事件总线

<!-- 子组件A -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Child B</button>
  </div>
</template>

<script>
import { EventBus } from './eventBus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('send-message', 'Hello from Child A!');
    }
  }
};
</script>

<!-- 子组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './eventBus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('send-message', (message) => {
      this.message = message;
    });
  }
};
</script>

在这个例子中，子组件A通过事件总线触发send-message事件，子组件B通过事件总线监听send-message事件并更新message。

3. 跨层级组件传值

在复杂的应用中，组件之间的层级关系可能非常深。为了在跨层级的组件之间传递数据，Vue.js 提供了provide和inject机制。

3.1 使用`provide`和`inject`

<!-- 祖先组件 -->
<template>
  <div>
    <parent-component></parent-component>
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  },
  provide() {
    return {
      message: 'Hello from Ancestor!'
    };
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

在这个例子中，祖先组件通过provide提供了一个message属性，子组件通过inject注入message并在模板中显示。

3.2 使用 Vuex 进行状态管理

对于更复杂的应用，Vuex 是一个更好的选择。Vuex 是 Vue.js 的官方状态管理库，适用于管理全局状态。

3.2.1 安装 Vuex

npm install vuex

3.2.2 创建 Vuex Store

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex!'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  }
});

3.2.3 在组件中使用 Vuex

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  },
  methods: {
    updateMessage() {
      this.$store.dispatch('updateMessage', 'Updated Message from Child!');
    }
  }
};
</script>

在这个例子中，子组件通过$store访问 Vuex Store 中的message状态，并通过dispatch方法触发updateMessage action 来更新message。

4. 总结

Vue.js 提供了多种方式来实现组件间的数据传递，包括props、自定义事件、事件总线、provide和inject以及 Vuex。每种方法都有其适用的场景，开发者可以根据实际需求选择合适的方式。

父子组件传值：使用props和自定义事件是最常见的方式。
兄弟组件传值：可以通过父组件中转或使用事件总线。
跨层级组件传值：使用provide和inject或 Vuex。

通过合理使用这些方法，可以有效地管理组件之间的数据流动，提高代码的可维护性和可扩展性。