父子组件通信

父子组件通信

父组件向子组件传值

可以使用 props 来向子组件传递动态 boolean 值。
在父组件中定义一个 boolean 类型的变量，然后将它作为属性传递给子组件。
父组件：

<template>
  <div>
    <child-component :showChild="showChild"></child-component>
    <button @click="toggleChild">Toggle Child Component</button>
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data () {
      return {
        showChild: false
      }
    },
    methods: {
      toggleChild () {
        this.showChild = !this.showChild
      }
    }
  }
</script>

在子组件中声明 props，接收父组件传递过来的 boolean 类型属性。
子组件：

<template>
  <div v-if="showChild">This is the child component</div>
</template>

<script>
  export default {
    props: {
      showChild: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

以上代码实现了在父组件中动态控制子组件的显示和隐藏。当父组件中的 showChild 属性的值为 true 时，子组件将会显示。当 showChild 属性的值为 false 时，子组件将被隐藏。通过在父组件中的 toggleChild 方法中修改 showChild 属性的值，就可以动态控制子组件的显示状态。

子组件向父组件传值

在 Vue2 中，父组件可以实时监听子组件事件，并动态更新父组件数据。一种方法是使用 $emit() 方法，该方法允许子组件向父组件传递事件并传递数据。
具体步骤如下：

1. 在子组件中定义一个自定义事件，使用 $emit() 方法来触发该事件并传递数据：

<template>
  <el-button type="primary" @click="buttonClick()">点击</el-button>
</template>

<script>
export default {
  data() {
    return {
      data: 'hello'
    }
  },
  methods: {
    buttonClick() {
      this.$emit('myEvent', this.data);
    }
  }
}
</script>

2. 在父组件中使用 v-on 指令来监听子组件事件，并在监听函数中动态更新父组件数据：

<template>
  <div>
    <child-component v-on:myEvent="onChildEvent"></child-component>
    <p>{{ myData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myData: ''
    }
  },
  methods: {
    onChildEvent(data) {
      this.myData = data;
    }
  }
}
</script>

在以上示例中，子组件定义了一个名为 myEvent 的自定义事件，并在按钮点击时使用 $emit() 方法触发该事件并传递数据。在父组件中使用v-on 指令监听该事件，并在监听函数中动态更新父组件数据 myData。
通过这种方式，父组件可以实时监听子组件事件并动态更新数据，以达到数据的双向绑定效果。