VUE+vuex+element-plus实现管理员发布公告（兄弟组件间信息传输）

效果图：

1.填写界面

2.改变的公告栏

3.代码实现：

1.填写页面

<template>

  <!-- 表单，绑定form -->
  <el-form :model="form" label-width="120px">

    <el-form-item label="通知一">
      <el-input
        v-model="form.notice1"
        :rows="2"
        type="textarea"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item label="通知二">
      <el-input
        v-model="form.notice2"
        :rows="2"
        type="textarea"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item label="通知三">
      <el-input
        v-model="form.notice3"
        :rows="2"
        type="textarea"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive} from "vue";
const store = useStore();

const form = reactive({
  notice1:"",
  notice2:"",
  notice3:"",
});

const onSubmit = () => {
  // 更改提交给vuex
  store.commit({
  type:"upNotice",
  newNotice:form
  })
};
</script>

<style scoped>

</style>

2.轮播图代码

<template>
  <div class="block text-center" m="t-4">
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in notice" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
const store = useStore();

// 获取vuex中notice数据
const notice = store.state.notice;
</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

 3.vuex代码

import { createStore } from 'vuex'
};
export default createStore({
  state: {
    notice: {
      notice1: "1",
      notice2: "2",
      notice3: "3",
    }
  },
  getters: {
    notice:state=>state.notice
  },
  mutations: {
    upNotice(state,payload){
    state.notice=payload.newNotice
    }
  },
  actions: {
 
  },
  modules: {
  }
})