如何用emit,插槽,写一个vue的代码

首先，我们需要了解emit和插槽的概念。

emit和插槽是Vue组件通信的两种方式。通过emit可以在父组件中监听子组件的事件，而插槽则是为了在父组件中插入子组件的内容。

下面是一个简单的示例代码：

子组件 Child.vue：

<template>
  <div>
    <button @click="handleClick">{{ label }}</button>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
  },
  methods: {
    handleClick() {
      this.$emit("btn-click");
    },
  },
};
</script>

在子组件中，我们定义了一个按钮和一个点击事件，当按钮被点击时，通过`this.$emit("btn-click")`触发了一个自定义事件。

父组件 Parent.vue：

<template>
  <div>
    <Child label="Click me" @btn-click="handleBtnClick" />
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  methods: {
    handleBtnClick() {
      console.log("Button clicked");
    },
  },
};
</script>

在父组件中，我们通过引入子组件Child，并将其作为标签使用。在标签中，我们将label属性传递给子组件，同时监听了子组件的自定义事件`@btn-click`，并将其绑定到一个方法handleBtnClick上。

当子组件中的按钮被点击时，通过`this.$emit("btn-click")`触发了自定义事件，父组件中绑定的方法handleBtnClick被调用，并在控制台输出了"Button clicked"。

这就是使用emit和插槽实现Vue组件通信的基本流程。