当前位置：首页 > article >正文

vue中子组件怎么修改父组件中的css样式的width值

article 2024/10/3 11:29:13

在 Vue 中，子组件可以通过事件或使用 Vuex 等状态管理库来修改父组件中的 CSS 样式。以下是两种常见的方法：

方法 1: 通过事件

父组件：定义一个方法来修改 width，并将该方法传递给子组件。

<template>
  <div>
    <div :style="{ width: widthValue }" class="parent-box">
      这是父组件
    </div>
    <ChildComponent @change-width="updateWidth" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      widthValue: '200px',
    };
  },
  methods: {
    updateWidth(newWidth) {
      this.widthValue = newWidth;
    },
  },
};
</script>

<style>
.parent-box {
  background-color: lightblue;
}
</style>

子组件：触发事件，传递新的宽度值。

<template>
  <button @click="changeWidth">改变父组件宽度</button>
</template>

<script>
export default {
  methods: {
    changeWidth() {
      this.$emit('change-width', '400px');
    },
  },
};
</script>

方法 2: 使用 Vuex（或其他状态管理）

如果应用较复杂，可以使用 Vuex 来管理状态：

Vuex Store：设置一个状态和修改它的 mutation。

// store.js
export const store = new Vuex.Store({
  state: {
    widthValue: '200px',
  },
  mutations: {
    setWidth(state, newWidth) {
      state.widthValue = newWidth;
    },
  },
});

父组件：使用 Vuex 的状态。

<template>
  <div>
    <div :style="{ width: $store.state.widthValue }" class="parent-box">
      这是父组件
    </div>
    <ChildComponent />
  </div>
</template>

<style>
.parent-box {
  background-color: lightblue;
}
</style>

子组件：提交 mutation 修改宽度。

<template>
  <button @click="changeWidth">改变父组件宽度</button>
</template>

<script>
export default {
  methods: {
    changeWidth() {
      this.$store.commit('setWidth', '400px');
    },
  },
};
</script>