vue创建组件和使用

要创建一个Vue组件，你可以在Vue实例或Vue组件中使用Vue.component()方法。Vue.component()方法接受两个参数，第一个参数是组件的名称，第二个参数是一个包含组件选项的对象。

以下是一个简单的创建组件并使用的例子：

// 创建一个全局组件
Vue.component('my-component', {
  template: '<div>This is a custom component</div>'
})

// 创建一个Vue实例
new Vue({
  el: '#app'
})

现在你可以在HTML中使用你刚刚创建的组件：

<div id="app">
  <my-component></my-component>
</div>

这将在浏览器中显示出来：

This is a custom component

你还可以在Vue组件中创建局部组件，只需在组件选项中定义它们。局部组件只能在当前组件的模板中使用。

以下是一个使用局部组件的例子：

// 创建一个Vue组件
var myComponent = {
  template: '<div>This is a local component</div>'
}

// 创建一个Vue实例
new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})

在HTML中使用局部组件的方式也是一样的：

<div id="app">
  <my-component></my-component>
</div>

这将在浏览器中显示出来：

This is a local component

无论是全局组件还是局部组件，都可以在组件的template属性中定义组件的模板。其中可以包含HTML、Vue指令和插值表达式等。