Vue全局组件注册

通过Vue.component(‘组件名’, {配置对象})注册全局组件

在main.js中注册全局组件 test

import Vue from 'vue'
import App from './App.vue'

//全局组件,定义后可直接使用,无需引入
Vue.component('test', {
  data () {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">点击次数{{count}}</button>'
})

new Vue({
    el:'#app',
    template: '<App />',
    components: {App}
})

在App组件中使用 test 组件

  不需要另外引入,直接使用即可

<template>
    <div>
      <test />
  </div>
</template>

<script>
  export default {
    data () {
      return { }
    }
  }
</script>

<style>
</style>

猜你喜欢

转载自www.cnblogs.com/mp1994/p/10857746.html