Vue组件之非单文件组件的使用详解

下面我将为您详细讲解“Vue组件之非单文件组件的使用详解”的完整攻略。

什么是非单文件组件？

非单文件组件是指将组件的HTML、JS、CSS等代码都写在同一个文件中，并使用Vue.extend()方法将其构造成组件的一种方式。这种方式比较旧，但在一些老的Vue项目中仍有应用。目前Vue的官方文档已经不推荐使用这种方式。

非单文件组件的优缺点

优点

代码简单。不像单文件组件需要写很多template、script、style标签。
不需要安装打包工具（如Webpack、Rollup等）。

缺点

不利于代码的维护和复用。HTML、JS、CSS都写在同一个文件中，比较混乱。
缺少一些预处理功能，如父子组件之间的数据传递、computed属性、props的验证等。

非单文件组件的示例

示例1：按钮组件

下面是一个简单的按钮组件示例：

Vue.component('my-button', {
  template: `
  <button class="btn" v-bind:class="{'btn-primary': primary}">
    <slot></slot>
  </button>
  `,
  props: {
    primary: {
      type: Boolean,
      default: false
    }
  }
})

这个组件有一个primary属性，用来控制按钮是否是主要按钮。在模板中使用了slot来实现按钮文字的传递。

示例2：弹窗组件

下面是一个简单的弹窗组件示例：

Vue.component('my-dialog', {
  template: `
  <div class="dialog" v-if="visible">
    <div class="title">{{ title }}</div>
    <div class="content"><slot></slot></div>
    <div class="footer">
      <button class="btn btn-primary" @click="onOk">确认</button>
      <button class="btn" @click="onCancel">取消</button>
    </div>
  </div>
  `,
  data() {
    return {
      visible: false
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    },
    onOk() {
      this.$emit('ok')
      this.hide()
    },
    onCancel() {
      this.$emit('cancel')
      this.hide()
    }
  }
})

这个组件有一个title属性，表示弹窗的标题。在模板中使用了slot来实现弹窗中的内容传递，并使用了methods中的show、hide、onOk和onCancel方法来实现弹窗的显示、隐藏和按钮的操作。同时，提供了ok和cancel两个事件供外部使用。