您现在的位置是：首页 >技术交流 >Vue——父子组件传递参数网站首页技术交流

Vue2子组件向父组件传递参数

        ----子组件可以通过 $emit 方法向父组件传递参数。

基本原理：子组件通过 $emit 触发一个自定义事件，并将需要传递的参数作为事件的参数传递给父组件。父组件通过监听这个自定义事件来接收参数。

案例：

子组件

//子组件（ChildComponent.vue）
<template>
  <div>
    <button @click="sendDataToParent">将数据发送给父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "这是子组件的数据",
      number: 42
    };
  },
  methods: {
    sendDataToParent() {
      // 使用 $emit 触发自定义事件，并传递参数
      this.$emit("child-event", this.message, this.number);
    }
  }
};
</script>

父组件

<template>
  <div>
    <h1>父组件</h1>
    <child-component
      @child-event="handleChildEvent"
    ></child-component>
    <p>从子组件接收到的消息：{{ receivedMessage }}</p>
    <p>从子组件接收到的数字：{{ receivedNumber }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: "",
      receivedNumber: null
    };
  },
  methods: {
    handleChildEvent(message, number) {
      // 接收子组件传递的参数
      this.receivedMessage = message;
      this.receivedNumber = number;
    }
  }
};
</script>

• 点击子组件中的按钮时，子组件会触发 child-event 事件，并将 message 和 number 作为参数传递给父组件。

• 父组件通过监听 child-event 事件，调用 handleChildEvent 方法，接收子组件传递的参数，并将它们存储到父组件的 data 中。

• 父组件的模板中会显示从子组件接收到的消息和数字。

Vue2路由导航传递参数

这不像父子组件那样，这里只有考虑使用vuex去存储数据

Vuex的使用

1.先安装【需注意自己安装的Vuex的版本和vue的版本符不符合】

npm install vuex --save

开始这里遇到了问题，这个错误信息表明在尝试安装 Vuex 时，npm 遇到了依赖冲突的问题。具体来说，Vuex 4.1.0 需要 Vue 3.2.0 或更高版本，而你的项目中安装的是 Vue 2.7.16。

//修改
npm install vuex@3 --save

2.在 Vuex 中创建一个 store，并定义 state、mutations 和 actions。

 创建 Vuex Store

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedData: null
  },
  mutations: {
    setSharedData(state, data) {
      state.sharedData = data;
    }
  },
  actions: {
    setSharedData({ commit }, data) {
      commit('setSharedData', data);
    }
  }
});

在 main.js 中引入 Vuex store

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

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

后续需要持久化存储数据

Vuex持久化存储

这里借助vuex-persistedstate 插件

npm install vuex-persistedstate --save

配置

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

Vue.use(Vuex);

const store = new Vuex.Store({
    plugins: [createPersistedState({
        paths: ['bedOrderData']
    })],
    state: {
    sharedData: null,
    bedOrderData:null,
  },
  mutations: {
    //设置共享数据
    setSharedData(state, data) {
      state.sharedData = data;
    },
    //设置预定床位状态
    setBedOrderData(state, data) {
      state.bedOrderData = data;
    }
  },
  actions: {
    setSharedData({ commit }, data) {
      commit('setSharedData', data);
    },
    setBedOrderData({ commit }, data) {
      commit('setBedOrderData', data);
    }
  }
});


export default store;