Vue开发_组件之间的传参（2）

① 　父组件是计算属性

可以通过父组件的计算属性将参数传递给子组件。这样可以确保父组件的状态或数据变化时，子组件可以自动更新。

 

<template>
  <div>
    <h1>父组件</h1>
    <p>父组件的消息: {{ parentMessage }}</p>
    <ChildComponent :message="computedMessage"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  computed: {
    computedMessage() {
      // 这里可以进行更多的计算或处理
      return this.parentMessage + ' (computed)';
    }
  }
};
</script>

 

子组件 (ChildComponent.vue)

子组件接收从父组件传递来的计算属性参数，并展示它。

<template>
  <div>
    <h2>子组件</h2>
    <p>子组件接收到的消息: {{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

 

②  子组件是计算属性

 

在 Vue 2 中，子组件可以接收父组件传递的属性，然后使用这些属性在子组件的计算属性中进行进一步处理

1. 创建父组件和子组件

父组件 (ParentComponent.vue)

父组件中有一些数据，这些数据将作为属性传递给子组件。

<template>
  <div>
    <h1>父组件</h1>
    <p>父组件的消息: {{ parentMessage }}</p>
    <ChildComponent :message="parentMessage"></ChildComponent>
  </div>
</template>

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

子组件 (ChildComponent.vue)

子组件接收从父组件传递来的属性，并在计算属性中对其进行处理。

<template>
  <div>
    <h2>子组件</h2>
    <p>原始消息: {{ message }}</p>
    <p>处理后的消息: {{ computedMessage }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  computed: {
    computedMessage() {
      // 对传递来的消息进行处理
      return this.message + ' (computed in Child)';
    }
  }
};
</script>

 

 

③【vuex】  + mapState

vuex 的状态映射到组件的计算属性中

1. 创建 Vuex Store

首先，创建一个简单的 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!',
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

2. 在主文件中注册 Store

在你的主文件中（例如 main.js），注册 Vuex store。

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

3. 使用 mapState 在组件中映射状态

现在，你可以在组件中使用 mapState 将 Vuex 状态映射到组件的计算属性中。

<!-- App.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState({
      message: state => state.message, // 映射 state.message 到 this.message
      count: state => state.count      // 映射 state.count 到 this.count
    })
  },
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 到 this.$store.commit('increment')
    ]),
    incrementCount() {
      this.increment();
    }
  }
};
</script>

总结

• 我们使用 mapState 将 Vuex 的 message 和 count 状态映射到组件的计算属性 message 和 count。
• 我们使用 mapMutations 将 Vuex 的 increment mutation 映射到组件的方法 increment。
• 在模板中，我们显示 message 和 count，并提供一个按钮来调用 incrementCount 方法，这个方法实际上调用了 increment mutation

 

④【pina】  + mapState

Pinia 是 Vue 3 的状态管理库，但也可以与 Vue 2 一起使用。

要在 Vue 2 中使用 Pinia，需要安装 @pinia/nuxt 并做一些配置

Vue 2 中使用 Pinia 和 mapState 将状态映射到组件的计算属性中。

1. 安装 Pinia 和 Vue 2 相关依赖

首先，确保你安装了 Pinia 和 @vue/composition-api，后者是为了在 Vue 2 中使用组合式 API。

npm install pinia @vue/composition-api

2. 创建 Pinia Store

创建一个简单的 Pinia store，其中包含一些状态和方法。

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({
    message: 'Hello from Pinia!',
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

3. 配置 Pinia 和 Composition API

在你的主文件中（例如 main.js），注册 Pinia 和 @vue/composition-api。

// main.js
import Vue from 'vue';
import App from './App.vue';
import VueCompositionAPI from '@vue/composition-api';
import { createPinia, mapState, mapActions } from 'pinia';

Vue.use(VueCompositionAPI);
const pinia = createPinia();
new Vue({
  pinia,
  render: h => h(App)
}).$mount('#app');

4. 使用 mapState 在组件中映射状态

现在，你可以在组件中使用 mapState 将 Pinia 的状态映射到组件的计算属性中。

<!-- App.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'pinia';
import { useCounterStore } from './stores/counter';

export default {
  computed: {
    ...mapState(useCounterStore, {
      message: 'message',
      count: 'count'
    })
  },
  methods: {
    ...mapActions(useCounterStore, ['increment']),
    incrementCount() {
      this.increment();
    }
  }
};
</script>

总结：

• 我们使用 mapState 将 Pinia 的 message 和 count 状态映射到组件的计算属性 message 和 count。
• 我们使用 mapActions 将 Pinia 的 increment action 映射到组件的方法 increment。
• 在模板中，我们显示 message 和 count，并提供一个按钮来调用 incrementCount 方法，这个方法实际上调用了 increment action。