vue组件 非单文件组件的使用步骤

使用vue组件的方法有两种：单文件组件和非单文件组件。

非单文件组件的使用步骤如下：

1. 定义组件

定义非单文件组件有两种方法，一种是使用Vue.component()函数，另一种是使用全局的组件注册方法。

使用Vue.component()函数：

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello, Vue!'
    };
  }
})

使用全局的组件注册方法：

var myComponent = {
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello, Vue!'
    };
  }
}

Vue.component('my-component', myComponent)

1. 使用组件

使用非单文件组件的方法与单文件组件类似。只需要在Vue实例中引入定义好的组件即可。

new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})

1. 注意事项

2. 定义好组件后，需要在Vue实例中进行注册，否则组件无法使用。

3. 组件名需要符合HTML标准，且不能有大写字母和特殊符号。
4. 组件模板只能有一个根元素。
5. 组件可以使用props来进行数据传递。
6. 组件内部也可以使用Vue指令和事件进行数据绑定。

示例：

<!-- index.html -->
<div id="app">
  <my-component></my-component>
</div>

// script.js
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

new Vue({
  el: '#app'
})

在上面的示例中，我们定义了一个名为my-component的非单文件组件，并在Vue实例中进行了注册。在HTML文件中，我们把这个组件放到了id为app的标签内。

示例：

<!-- index.html -->
<div id="app">
  <button-counter></button-counter>
</div>

// script.js
var buttonCounter = {
    template: `<div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Click me!</button>
    </div>`,
    data: function() {
      return {
        count: 0
      };
    },
    methods: {
        increment: function() {
            this.count++;
        }
    }
}

new Vue({
  el: '#app',
  components: {
    'button-counter': buttonCounter
  }
});

在上面的示例中，我们定义了一个名为buttonCounter的非单文件组件，并在Vue实例中进行了注册。该组件包含一个计数器，每点击一次按钮，计数器加一。在HTML文件中，我们把这个组件放到了id为app的标签内。