Vue.js技术问询：父组件数据更新时，无需this.$parent更新子组件数据

Hey there! Awesome to hear you're diving into Vue.js—it's such a fun framework to work with. Let's fix that button visibility logic the proper Vue way, ditching the this.$parent workaround entirely.

The key here is following Vue's "Props Down, Events Up" pattern: your root instance holds the source of truth for visibility states, child components receive those states via props, and they emit events to tell the root when to update those states. Here's a step-by-step solution:

1. Let the Root Instance Manage Visibility State #

First, define the state variables in your root Vue instance. This is where we'll track whether the setting buttons should be visible:

new Vue({
  el: '#app',
  data: {
    showSettingButtons: false // Controls if setting1/setting2 are displayed
  }
})

2. Pass State to Child Components via Props #

Create reusable components for your setting buttons, and use props to receive the visibility state from the root. For example:

Vue.component('setting-button', {
  props: ['isVisible', 'buttonLabel'],
  template: `
    <button v-if="isVisible">{{ buttonLabel }}</button>
  `
})

Then in your root template, pass the root's state to these components:

<setting-button :is-visible="showSettingButtons" button-label="setting1"></setting-button>
<setting-button :is-visible="showSettingButtons" button-label="setting2"></setting-button>

3. Emit Events from Child to Update Root State #

For your "settings on" toggle button, create a component that emits a custom event when clicked. The root will listen for this event and update the visibility state:

Vue.component('settings-toggle', {
  template: `
    <button @click="triggerToggle">settings on</button>
  `,
  methods: {
    triggerToggle() {
      this.$emit('toggle-settings'); // Send event up to root
    }
  }
})

In the root template, listen for this event and toggle the state:

<settings-toggle @toggle-settings="showSettingButtons = !showSettingButtons"></settings-toggle>

This approach keeps your data flow clear and maintainable—no messy $parent references needed. If you ever need more complex state management across multiple components later, you could look into Vuex, but this pattern is perfect for your current use case.

内容的提问来源于stack exchange，提问作者Kalreg