Vue组件全局/局部注册

全局注册

main.js中创建

Vue.component('button-counter', {

  data: function () {

    return {

      count: 0

    }

  },

  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

})

使用

<div id="components-demo">

  <button-counter></button-counter>

</div>

new Vue({ el: '#components-demo' })

局部注册

直接在.vue文件中使用

第一种方式

通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({

  el: '#app',

  components: {

    'component-a': ComponentA,

    'component-b': ComponentB

  }

})

如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {

  components: {

    'component-a': ComponentA

  },

  // ...

}

第二种方式

import ComponentA from './ComponentA.vue'

export default {

  components: {

    ComponentA //ComponentA:ComponentA

  },

  // ...

}

巴特西

Vue组件全局/局部注册

全局注册

局部注册

第一种方式

第二种方式

最新文章

热门文章