Vue 创建全局组件

实例:

/* 声明一个组件选项,创建组件必须用到 */
let buttonCounter:ComponentOptions= {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`,
}

1. 法一:

// 定义一个名为 button-counter 的新全局组件
const app = Vue.createApp({})
app.component('button-counter', buttonCounter);

2. 法二:

// 定义一个名为 button-counter 的新全局组件
const app = Vue.createApp({
	components:{
		button-counter:buttonCounter
	}
})

3. 说明:

1. child::Vue 组件选项
2. child::Vue component()方法
3. child::Vue components选项 创建子组件
4. 在这里演示的是一个简单的示例，但是在典型的 Vue 应用中，我们使用单文件组件而不是字符串模板。你可以在本节找到有关它们的更多信息。