elmentui 父子组件

Element UI提供了一种父子组件之间传值和事件绑定的方法。首先，我们需要创建一个父组件和一个子组件。在父组件中，我们可以添加相关的方法（通过methods选项）。其中，fatherMethod()是一个父组件的方法，activeSon()是一个子组件调用父组件方法的方法。然后，在父组件中，我们可以通过@callFather来绑定子组件的activeSon方法。在子组件中，我们可以通过this.$emit来触发父组件的方法。最后，在子组件中，我们可以通过@click来触发activeBtn方法。通过以上步骤，我们可以实现父子组件之间的传值和事件绑定。

换句话说，当子组件被点击时，它会通过this.$emit("callFather")来触发父组件的方法。而父组件中的方法会在控制台上打印"father组件"，这样就实现了父子组件之间的传值和事件绑定。

这种方法可以帮助我们在Element UI中实现父子组件之间的通信和交互，提高了组件的复用性和灵活性。这对于开发复杂的应用程序或组件化的项目非常有用。因此，掌握Element UI父子组件的传值和事件绑定是很重要的。

相关问题

描述父子组件和非父子组件是怎么通信的

在Vue中，父子组件通信和非父子组件通信的方式是不同的。

1. 父子组件通信：父子组件之间的通信可以通过`props`和事件来实现。父组件可以通过`props`向子组件传递数据，子组件可以通过`$emit`触发事件并向父组件传递数据。比如，我们可以在父组件中向子组件传递一个名字：

父组件：

<template>
  <div>
    <child-component :name="name" @update-name="updateName"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      name: "Vue",
    };
  },
  methods: {
    updateName(newName) {
      this.name = newName;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <p>My name is {{ name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
  },
  methods: {
    changeName() {
      this.$emit("update-name", "React");
    },
  },
};
</script>

2. 非父子组件通信：非父子组件之间的通信需要借助一个中央事件总线（event bus）来实现。可以在Vue实例中创建一个事件总线，并通过`$emit`触发事件，通过`$on`监听事件。比如，我们可以在一个组件中触发一个事件，另一个组件中监听这个事件：

// Event Bus
const eventBus = new Vue();

// Component A
<template>
  <div>
    <button @click="emitEvent">Emit Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      eventBus.$emit("event-name", "Event Data");
    },
  },
};
</script>

// Component B
<template>
  <div>
    <p>{{ eventData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventData: "",
    };
  },
  mounted() {
    eventBus.$on("event-name", (data) => {
      this.eventData = data;
    });
  },
};
</script>

这样，当在组件A中点击按钮时，会触发一个名为`event-name`的事件，并向事件总线传递一个数据。组件B中监听这个事件，并在事件回调中更新数据。这样就实现了非父子组件之间的通信。

elementui 3.0 父子组件

在ElementUI 3.0中，使用父子组件非常简单。父组件负责显示主要内容，而子组件负责显示特定项或细节。父组件可以通过props将数据传递给子组件，并且可以监听子组件的事件。

首先，在父组件中引入子组件。可以使用`import`语句将子组件导入到父组件中。

然后，在父组件的`components`选项中注册子组件，以便在父组件中使用子组件。

在父组件的模板中，使用`<子组件名></子组件名>`的形式将子组件插入到需要的位置。

在父组件的`data`属性中定义需要传递给子组件的数据。

在子组件中，使用`props`属性声明需要接收的父组件传递的数据，并在子组件的模板中使用该数据。

如果需要从子组件向父组件传递数据，可以使用`$emit`方法触发自定义事件，并将需要传递的数据作为参数。

在父组件中，通过在子组件的标签上添加`@事件名`监听子组件触发的事件，并在相应的方法中处理传递的数据。

通过这样的父子组件的方式，可以有效地组织和管理代码，让代码结构更加清晰可读。