vue中 讲子组件写进函数里

在Vue中，将子组件封装成函数组件（Functional Component）是一种现代做法，它可以让你在需要的时候动态生成组件。这种模式适用于那些不需要维护状态、只负责渲染单一内容的轻量级组件。以下是将子组件作为函数的基本步骤：

// 首先导入Vue
import { h } from "vue";

// 然后定义一个接收props的函数组件
const MyChildComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>我是子组件，接收到的标题是：{{ props.title }}</p>
    </div>
  );
};

// 使用它就像使用普通组件一样，在需要的地方插入
export default {
  components: {
    MyChildComponent
  },
  template: `
    <div>
      <button @click="showChild">显示子组件</button>
      <my-child-component :title="childTitle" v-if="showChild"></my-child-component>
    </div>
  `,
  data() {
    return {
      childTitle: '',
      showChild: false
    };
  },
  methods: {
    showChildHandler() {
      this.showChild = true;
      // 这里可以动态设置childTitle
      this.childTitle = "这是一个动态标题";
    }
  },
  mounted() {
    // 初始化时隐藏子组件
    this.showChild = false;
  }
};

在这个例子中，当你点击按钮时，`showChildHandler`方法会被调用，将`showChild`的状态设为`true`，从而使`MyChildComponent`显示出来。你可以根据需求调整`childTitle`的值。